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

对于当前代码，当我按下某个选项的第一个字母时，控件会出现，但如果我按下第一个，则控件不起作用：该选项的两个或三个或四个字母，即如果列表中的某个选项是“Jquery”，那么当我只按下J时，控件会出现，但当我依次按下J和q或J，q时，随后控件消失。我想将此功能添加到我的下拉列表中，请提供帮助

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>

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

$('#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");
    });
});

试试这个

$(document).keypress(function (e) {
    var key = String.fromCharCode(e.which);
    $('#cars').on('shown.bs.dropdown', function () {
        var $this = $(this);
        $this.find('li').removeClass('active');
        $this.find('li').removeClass('active').filter(function() {
            return $(this).text().toLowerCase().indexOf(key) ==0;
        }).first().addClass('active');
    });
});

---

我想你要找的是

var$this=$（“#cars”）；
变量计时器，字符=“”；
$（文档）。按键（功能（e）{
var key=String.fromCharCode（e.which）；
中频（定时器）{
字符+=键；
}否则{
字符=键；
}
console.log（'searc'，chars）
var regex=new RegExp（'^'+chars，'i'）；
$this.find（'li'）.removeClass（'active'）.filter（function（））{
返回regex.test（$（this.text（））；
}).first（）.addClass（'active'）；
计时器=设置超时（函数（）{
字符=''；
定时器=未定义；
}, 500)
});
。激活a{
颜色：红色；
}











@Rohan Kumar:不，伙计，它不工作。控件只在列表的第一个选项上停止。。