选择列表元素（捕捉下/上箭头）

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'元素。

- I-M-JM

---

你所说的“选择 li 元素”是什么意思？ - Ram

你尝试过什么？What have you tried? - Matt Ball

展示一下你尝试过的，然后看看这个问题有没有被解决： https://dev59.com/WGox5IYBdhLWcg3w5IVv - Filipe Manuel

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/

- Joseph Silber

---

不确定问题是什么，但这个答案正是我在寻找的 :) - deckoff

你好，如果列表在溢出的 div 容器中，你如何将其向上和向下推动？ - Patrick

谢谢 @Joseph，这是非常好的方法，我正在使用你的代码，这正是我一直在寻找的。 - Aria5h4h

Answer 2

你可以使用MousetrapJS来实现这个功能。以下是一个示例，演示如何实现按下键。 首先，将类selected添加到第一个列表项中。

Mousetrap.bind('down', function() {
    var next = $(".suggestions  li.selected").removeClass("selected").next();
    if (next.length) {
       next.addClass("selected");
    } else {
       $(".suggestions li").first().addClass("selected");
    }
});

- Split Your Infinity

---

如果使用 if(next)，它将始终返回 true，请改用 if(next.length !== 0)。 - Oleg Berman