Bootstrap 4 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,

  // The maximum number of suggestions to render on the screen at one time.
  renderLimit: -1,

  // Clears contents when unfocusing if a matching option is not selected
  clearIfNoMatch: true,

  // Custom icon font class
  iconCaret: undefined,
  iconRemove: undefined
  
})

Changelog:

2019-03-28

• v1.2.0

2018-08-19

• Bugfix

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.