Question

使用当前代码，当我按下某个选项的第一个字母时，控件会进入它但如果我先按下它则不起作用：该选项的两个或三个或四个字母，即如果列表中的某个选项是＆＃39; Jquery＆＃39;，然后当我只按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");
    });
});

Answer 2

我认为你要找的是像

＆＃13;

var $this = $('#cars');

var timer, chars = '';
$(document).keypress(function(e) {
  var key = String.fromCharCode(e.which);

  if (timer) {
    chars += key;
  } else {
    chars = key;
  }
  console.log('searc', chars)

  var regex = new RegExp('^' + chars, 'i');

  $this.find('li').removeClass('active').filter(function() {
    return regex.test($(this).text());
  }).first().addClass('active');

  timer = setTimeout(function() {
    chars = '';
    timer = undefined;
  }, 500)

});

＆＃13;

.active a {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

试试这个，

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

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

3 个答案: