Auto select in a Bootstrap dropdown

Question

Suppose I have a plain html select tag. If I click on the select box and start typing the first letter of an item then that item gets auto-selected as I type.

I would like the same functionality for a Bootstrap dropdown menu. Right now, it doesn't respond to any letters that a user types. How can I add the auto-select like the select tag has?

Here is an example on Bootply: http://www.bootply.com/126297 .

Answer 1

You could use jQuery to attach a keypress handler when the dropdown is shown. Then look through the li items to see if the first letter matches the key that was pressed...

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

    });

})

Working demo: http://www.bootply.com/126541

Answer 2

You need to add the class form-control to the select. I edited your Bootply and while the style of the select does not look correct, the select functions the way you'd like it to. Be sure to follow all of the Bootstrap docs when creating forms.

<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>