选择列表元素（捕获向下/向上箭头）[关闭]

Question

我有以下 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' 元素。

Answer 1

由于您的问题有点过于模糊，因此您要完成的工作并不完全清楚。

如果您要突出显示 li 元素，请使用：

var $listItems = $('li');

$('input').keydown(function(e) {
    var key = e.keyCode;
    var $selected = $listItems.filter('.selected');
    var $current;

    if (![38, 40].includes(key)) 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());

这是小提琴：http://jsfiddle.net/GSKpT/1/

Answer 2

您可以为此使用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");
    }
});