jquery - 通过按键选择下拉列表中的选项

Question

使用当前代码，当我按某个选项的第一个字母时，控件会出现，但如果我先按该选项的两个或三个或四个字母，即如果列表中的某个选项是，则控件不起作用'Jquery'，然后当我只按 J 时，控件就会出现，但是当我连续按 J 和 q 或连续按 J、q、e 时，控件消失。我想将此功能添加到我的下拉列表中，所以请帮助.

Jquery函数:

$('#cars').on('shown.bs.dropdown', function () {

    var $this = $(this);

    $(document).keypress(function (e) {
        var key = String.fromCharCode(e.which);

        $this.find('li').removeClass('active').filter(function() {
            return $(this).text().charAt(0).toLowerCase() === key;
        }).first().addClass('active');

    });

    $('#').on('hide.bs.dropdown', function () {
        $(document).unbind("keypress");
    });
});

HTML 代码:

<div class="btn-group dropdown" id="cars">
<a data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Models<span class="caret"></span></a>
  <ul class="dropdown-menu">  
<li><a class="hc" href="#">Volvo</a></li>
<li><a class="hc" href="#">Saab</a></li>
<li><a class="hc" href="#">Mercedes</a></li>
<li><a class="hc" href="#">Polo</a></li>
<li><a class="hc" href="#">Vento</a></li>
<li><a class="hc" href="#">Zen</a></li>
<li><a class="hc" href="#">Nano</a></li>
<li><a class="hc" href="#">Fortuner</a></li>
<li><a class="hc" href="http://www.audi.com/">Audi</a></li>
  </ul>
</div>

Answer 1

不要使用循环并将事件类设置为所有匹配的元素，而是过滤然后仅选择集合中的第一个元素

$('#cars').on('shown.bs.dropdown', function () {

    var $this = $(this);

    $(document).keypress(function (e) {
        var key = String.fromCharCode(e.which);

        $this.find('li').removeClass('active').filter(function() {
            return $(this).text().charAt(0).toLowerCase() === key;
        }).first().addClass('active');

    });

    $('#').on('hide.bs.dropdown', function () {
        $(document).unbind("keypress");
    });
});