Bootstrap Combobox

Provides combobox as a Twitter Bootstrap component, based on dropdown (which is compatible down to IE7).

See demo.

Get started

Files of this component can be download from the source repository: js/

It requires jQuery 1.10+ & Twitter Bootstrap 3+.

It's also available as a NPM package: npm install bootstrap-combobox

Setup

Combobox plugin can be applied on select elements, to turn them into comboboxes.

<!-- Dependencies -->
<script src="//url/to/jquery-1.10.2.min.js"></script>
<script src="//url/to/bootstrap.js"></script>
<script src="//url/to/bootstrap-combobox.min.js"></script>

<!-- UI dependencies -->
<link href="//url/to/bootstrap.min.css" rel="stylesheet" />

<!-- HTML to be rendered as a combobox -->
<select id="uniqueId" name="fieldName"
  class="optional overall classes"
  data-btn-class="option toggle classes">
  <!-- ... -->
</select>

<!-- Install combobox UI on the select -->
<script>$('select').btComboBox()</script>

API reference

selectedOption

.btComboBox('selectedOption')

Returns selected option ([val, label, element]) or null (if none).

var o = $('.btn-group').btComboBox('selectedOption');
var val = o[0], label = o[1], elem = o[2];

value

.btComboBox('value')

Returns value of selected option.

var v = $('.btn-group').btComboBox('value')

select

.btComboBox({'action':"select",'value':"V"})

Selects option matching given value (if one).

$('.btn-group).btComboBox({'action':"select",'value':"value_to_select"})

clear

.btComboBox('clear')

Removes all options and unselect value.

$('.btn-group').btComboBox('clear')

load

.btComboBox({'action':"load", parameters})

Appends options, using given parameters properties.

• pairs: Array of option to be appended; Each array element should be either [val,label], or anything else if next extractor property is provided. If pair is ['_',null] it will be a divider.
• extractor (optional, required if elements of pairs array aren't [val,label]): Function (element of pairs) => [value, label].

$('.btn-group').btComboBox({
  'action':"load", 
  'pairs': [["val1", "label1"], ["val2", "label2"]]
});

// OR
$('.btn-group').btComboBox({
  'action':"load", 
  'pairs': [{v:"val1", l:"label1"}, {v:"val2", l:"label2"}],
  'extractor': function(o) { return [o.v, o.l] }
})

reset

.btComboBox({'action':"reset", parameters})

Reset options, using same parameters as load method. Keep value selection (if value is still available in new options).

values

.btComboBox('values')

Returns values from all available options.

var vs = $('.btn-group').btComboBox('values')

disable/enable

.btComboBox('disable') / .btComboBox('enable')

Disable/enable combobox.

$('.btn-group').btComboBox('disable');
$('.btn-group').btComboBox('enable');

Events

change

Fired when combobox value is changed.

$("#combobox").on('change', function() { /* ... */ })