Filterable Multi Select Plugin For Bootstrap 4 - Select Dropdown

File Size: 671 KB
Views Total: 17669
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Filterable Multi Select Plugin For Bootstrap 4 - Select Dropdown

Select Dropdown is a jQuery plugin that converts the regular Bootstrap select element into a select dropdown with extra functionalities such as fuzzy search, multiple select, custom styles and more.

How to use it:

1. Load the necessary jQuery and Bootstrap 4 files in your html file.

<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2. Load the fuse.js library for the fuzzy search support.

<script src="dist/fuse.js"></script>

3. Load the Select Dropdown plugin's file.

<link href="dist/bootstrap-select-dropdown.css" rel="stylesheet">
<script src="dist/bootstrap-select-dropdown.js"></script>

4. Call the function selectDropdown() on the target select element and done. Not only single select, the plugin also supports multiple select and option groups.

<select id="demo" class="form-control" multiple>
  <option value="AF">Afghanistan</option>
  <option value="AX">&Aring;land Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AS">American Samoa</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AI">Anguilla</option>

5. Customize the Bootstrap 4 select dropdown with the following options.


  // max number of options to display within the dropdown button
  maxListLength: 4, 

  // hide the select
  hideSelect: true,

  // keeps dropdown open for multiselects.
  multiselectStayOpen: true, 

  // enables fuzzy search
  search: true,

  // respects dynamic changes to the select options.
  observeDomMutations: false, 

  // max height of the dropdown
  maxHeight: '300px', 

  // custom text
  textNoneSelected: "None selected",
  textMultipleSelected: "Multiple selected",
  textNoResults: "No results",
  htmlClear: "Clear search",

  // default CSS classes
  classDropdown: "dropdown",
  classBtnClear: "btn btn-outline-secondary",
  classBtnSearch: "btn btn-primary",
  classMenu: "dropdown-menu",
  classItem: "dropdown-item"


v0.14.6 (01/19/2020)

  • Enable multiple instances to be loaded dynamically


  • Version 0.14.0


  • Version 0.13.11: Bug fix: select buttons not appearing if search element is not present. 


  • Version 0.13.9: Refinement: search control focus places cursor at the end of entered text rather than at the start.


  • Version 0.13.8: Added a minimal example. Bug fix: setting search:false led to flawed logic causing the plugin to break.


  • Version 0.13.7: Bug fix: Hover background colour not being removed on hoverRemoveAll().


  • Version 0.13.6: Improved search efficiency by introducing a 300ms keyup delay before executing a search.


  • Version 0.11.1: Fixes for enabled/disabled button states and tooltips.


  • Version 0.10.2: Fix for button text on regular <select> elements.

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