我有以下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>
需要JavaScript / jQuery代码来捕获向下箭头键按下事件(在输入时),它将选择第一个'li'元素
连续向下键选择下一个'li'元素;和向上键选择以前的'li'元素。
答案 0 :(得分:18)
由于您的问题有点过于模糊,因此您要完成的工作并不完全清楚。
如果您要突出显示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');
});
这是小提琴:http://jsfiddle.net/GSKpT/
如果您只是想设置input
字段的值,请将最后一行更改为:
$(this).val ( $current.addClass('selected').text() );
答案 1 :(得分:0)
您可以使用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");
}
});