Filterable Multi Select Plugin For Bootstrap 4 - Select Dropdown

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.

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"

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

  • Publication date: 20.03.2018
  • Source