Auto Select In A Bootstrap Dropdown

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

Solution 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

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