Bootstrap SelectPicker
Keyboard to select options
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<p>Focus on the selectpicker w/ dropdown closed. Type one of the words from the list:
<div class="container body-content">
<select class="selectpicker">
<optgroup label="Words that start with 'Ad">
<option>Adamances</option>
<option>Adamantly</option>
<option>Adamsites</option>
<option>Adaptable</option>
<option>Adaptions</option>
<option>Addendums</option>
<option>Addicting</option>
<option>Addiction</option>
</optgroup>
<optgroup label="Words that start with 'Tri'">
<option>Triacetates</option>
<option>Triadically</option>
<option>Triangulate</option>
<option>Triathletes</option>
<option>Triaxiality</option>
<option>Tribologies</option>
<option>Tribologist</option>
<option>Tribulating</option>
<option>Calendar/option>
</optgroup>
</select>
</div>
JavaScript
$('.selectpicker').selectpicker();
$('body')
.on('keypress', 'button.selectpicker', function(e) {
var $options, $select, ctrl = this;
ctrl.buffer = (ctrl.buffer || "");
$select = $(ctrl).parent('.bootstrap-select').prev('select.selectpicker');
$options = $(ctrl).parent('.bootstrap-select').prev('select.selectpicker').find('option');
// If capturing, keep capturing
if( ctrl.capture ) {
clearTimeout( ctrl.capture );
}
// capture keystrokes; reset capture after 1sec.
ctrl.capture = window.setTimeout( function() {
ctrl.buffer = "";
ctrl.capture = null;
}, 1000);
// Use captured buffer to filter <options> of native select
// select first and trigger change & refresh
ctrl.buffer += String.fromCharCode(e.which);
var re = new RegExp("^" + ctrl.buffer + ".*", "i");
$options.filter( function() {
return $(this).text().match(re);
})
.first().prop('selected', true);
$select.change().selectpicker('refresh');
});