Bootstrap Dropdown Selection

Unlike most dropdown controls in use across the web today, Bootstrap dropdowns don’t natively support selecting items in the list by typing the item you want to select out on your keyboard. On regular dropdowns, if your list has 2 items in it:

<label class="control-label">New / Used:</label>
<div class="dropdown">
   <button id="buttonSearchVehicleNewUsed" class="btn dropdown-toggle " type="button" data-toggle="dropdown">-- Select Type --</button>               
      <ul id="dropDownSearchVehicleNewUsed" class="dropdown-menu" role="menu">
         <li data-val="true"><a href="#">New</a></li>
         <li data-val="false"><a href="#">Used</a></li>
         <li data-val="false"><a href="#">UsedCPO</a></li>
      </ul>
   </div>
</div>

and you open the dropdown, you can normally only use the up and down arrows to select your item. If you modify your list to have dozens or hundreds of items, this can take a significant amount of time.

This plugin allows you to open the dropdown and type “U” to have the first item starting with the letter “U” to become focused. Additional typing will allow a more refined search “USEDC” would jump to the “UsedCPO”. This allows users to quickly get to the item they want. The project is on my GitHub: https://github.com/mlapaglia/Bootstrap-DropdownSelect

Leave a Reply

Your email address will not be published. Required fields are marked *