在Bootstrap下拉列表中自动选择

时间:2014-03-31 21:31:51

标签: javascript twitter-bootstrap html-select

假设我有一个简单的html select标记。如果我单击选择框并开始键入项目的第一个字母,那么在我输入时该项目会自动选中。

我想要一个Bootstrap下拉菜单的相同功能。现在,它不响应用户键入的任何字母。如何添加select标签的自动选择?

以下是Bootply的一个示例:http://www.bootply.com/126297

2 个答案:

答案 0 :(得分:1)

您需要将类form-control添加到选择中。我编辑了你的Bootply,虽然select的样式看起来不正确,但select会按你喜欢的方式运行。确保在创建表单时遵循所有Bootstrap docs

<div>
  <select class="form-control">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
<div></div>
</div>

答案 1 :(得分:1)

当下拉列表为shown时,您可以使用jQuery附加按键处理程序。然后查看li项,看看第一个字母是否与按下的键匹配...

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

    var $this = $(this);
    // attach key listener when dropdown is shown
    $(document).keypress(function(e){

      // get the key that was pressed
      var key = String.fromCharCode(e.which);
      // look at all of the items to find a first char match
      $this.find("li").each(function(idx,item){
        $(item).removeClass("active"); // clear previous active item
        if ($(item).text().charAt(0).toLowerCase() == key) {
          // set the item to selected (active)
          $(item).addClass("active");
        }
      });

    });

})

工作演示:http://www.bootply.com/126541