I have following HTML structure ('ul li' are rendered as drop-down/select)
我有以下HTML结构('ul li'呈现为下拉/选择)
<input id="input_city" type="text" />
<div class="suggestions">
<ul>
<li value="0" name="New York">New York</li>
<li value="1" name="London">London</li>
<li value="2" name="Paris">Paris</li>
<li value="3" name="Sydney">Sydney</li>
</ul>
</div>
Need JavaScript/jQuery code to capture down arrow key press event (on input) which will select first 'li' element
需要JavaScript / jQuery代码来捕获向下箭头键按下事件(在输入时),它将选择第一个'li'元素
Consecutive down key select next 'li' elements; and up key select previous 'li' elements.
连续向下键选择下一个'li'元素;和向上键选择以前的'li'元素。
2 个解决方案
#1
16
Since your question is a little too vague, it's not exactly clear what you're trying to accomplish.
由于您的问题有点过于模糊,因此您要完成的内容并不完全清楚。
If you're trying to highlight the li
elements, use this:
如果您要突出显示li元素,请使用以下命令:
var $listItems = $('li');
$('input').keydown(function(e)
{
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if ( key != 40 && key != 38 ) return;
$listItems.removeClass('selected');
if ( key == 40 ) // Down key
{
if ( ! $selected.length || $selected.is(':last-child') ) {
$current = $listItems.eq(0);
}
else {
$current = $selected.next();
}
}
else if ( key == 38 ) // Up key
{
if ( ! $selected.length || $selected.is(':first-child') ) {
$current = $listItems.last();
}
else {
$current = $selected.prev();
}
}
$current.addClass('selected');
});
Here's the fiddle: http://jsfiddle.net/GSKpT/
这是小提琴:http://jsfiddle.net/GSKpT/
If you're just trying to set the value of your input
field, change the last line to this:
如果您只是尝试设置输入字段的值,请将最后一行更改为:
$(this).val ( $current.addClass('selected').text() );
Here's the fiddle: http://jsfiddle.net/GSKpT/1/
这是小提琴:http://jsfiddle.net/GSKpT/1/
#2
0
You can use MousetrapJS for this. Here an example how you could implement the down key. First add the class selected to the first list item.
您可以使用MousetrapJS。这是一个如何实现向下键的示例。首先将选定的类添加到第一个列表项。
Mousetrap.bind('down', function() {
var next = $(".suggestions li.selected").removeClass("selected").next();
if (next.length) {
next.addClass("selected");
} else {
$(".suggestions li").first().addClass("selected");
}
});
#1
16
Since your question is a little too vague, it's not exactly clear what you're trying to accomplish.
由于您的问题有点过于模糊,因此您要完成的内容并不完全清楚。
If you're trying to highlight the li
elements, use this:
如果您要突出显示li元素,请使用以下命令:
var $listItems = $('li');
$('input').keydown(function(e)
{
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
if ( key != 40 && key != 38 ) return;
$listItems.removeClass('selected');
if ( key == 40 ) // Down key
{
if ( ! $selected.length || $selected.is(':last-child') ) {
$current = $listItems.eq(0);
}
else {
$current = $selected.next();
}
}
else if ( key == 38 ) // Up key
{
if ( ! $selected.length || $selected.is(':first-child') ) {
$current = $listItems.last();
}
else {
$current = $selected.prev();
}
}
$current.addClass('selected');
});
Here's the fiddle: http://jsfiddle.net/GSKpT/
这是小提琴:http://jsfiddle.net/GSKpT/
If you're just trying to set the value of your input
field, change the last line to this:
如果您只是尝试设置输入字段的值,请将最后一行更改为:
$(this).val ( $current.addClass('selected').text() );
Here's the fiddle: http://jsfiddle.net/GSKpT/1/
这是小提琴:http://jsfiddle.net/GSKpT/1/
#2
0
You can use MousetrapJS for this. Here an example how you could implement the down key. First add the class selected to the first list item.
您可以使用MousetrapJS。这是一个如何实现向下键的示例。首先将选定的类添加到第一个列表项。
Mousetrap.bind('down', function() {
var next = $(".suggestions li.selected").removeClass("selected").next();
if (next.length) {
next.addClass("selected");
} else {
$(".suggestions li").first().addClass("selected");
}
});