Bootstrap Combo Box & Typeahead Plugin With jQuery

A simple, convenient jQuery dropdown plugin which converts the normal select element into a combo box with typeahead/autocomplete support. Supports Twitter Bootstrap 2/3/4. Licensed under the Apache License, Version 2.0.

Installation:

# NPM
$ npm install bootstrap-combobox
# Bower
$ bower install bootstrap-combobox

How to use it:

1. Load the Bootstrap Combobox's JavaScript and CSS files into your document which has jQuery and Bootstrap installed.

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-combobox.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bootstrap-combobox.js"></script>

2. Just call the main function combobox() on the target select element and done.

$('.mySelect').combobox()

3. Options and defaults.

$('.mySelect').combobox({
  // Bootstrap version
  bsVersion: '4', 
  // default templates
  menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>', 
  item: '<li><a href="#" class="dropdown-item"></a></li>',
  // Custom function with one item argument that compares the item to the input.
  matcher: null,
  // Custom function that sorts a list items for display in the dropdown
  sorter: null,
  // Custom function for highlighting an item. 
  highlighter: null,
  // Custom function that returns markup for the combobox.
  template: null,
  // The desired id of the transformed combobox. 
  appendId: null
  
})

Change log:

2018-02-09

• Fix undefined appendId

This awesome jQuery plugin is developed by danielfarrell. For more Advanced Usages, please check the demo page or visit the official website.