Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap Select jump to typed in letters

Hi Im using Bootstrap Select for a state dropdown and would like to implement the functionality where if a user starts typing "c" then it would drop them down to "california" (as an example). This is already out of the box for plugin but I would like to change where if the user "co" then it would drop them down to "Colorado", instead it takes them first to "california" after typing the "c" and then to "ohio" after typing the "o". Is there any way to accomplish this with the bootstrap select plugin?

FYI The plugin is pretty heavily incorporated into the site at the moment and changing to another plugin wouldnt really be an option for me.

Example: http://jsfiddle.net/2a9xp/513/

$('.selectpicker').selectpicker({size:10});
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>California</option>
  <option>Colorado</option>
  <option>Connecticut</option>
  <option>Kansas</option> 
  <option>Kentucky</option>
  <option>Ohio</option>
  <option>Oklahoma</option>
  <option>Oregon</option>
</select>
like image 947
Chad Watkins Avatar asked Sep 01 '25 05:09

Chad Watkins


1 Answers

add to select: data-live-search-style="startsWith"

<select class="selectpicker" data-live-search="true" data-live-search-style="startsWith">

Example: http://jsfiddle.net/vvuhq53g/

like image 89
illuzii Avatar answered Sep 02 '25 18:09

illuzii