This time I will share jQuery Plugin and tutorial about Filterable Multi Select Plugin For Bootstrap 4 – Select Dropdown, hope it will help you in programming stack.
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.
2. Load the fuse.js library for the fuzzy search support.
1 |
< script src = "dist/fuse.js" ></ script > |
3. Load the Select Dropdown plugin’s file.
1 |
< link href = "dist/bootstrap-select-dropdown.css" rel = "stylesheet" > |
2 |
< 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.
01 |
< select id = "demo" class = "form-control" multiple> |
02 |
< option value = "AF" >Afghanistan</ option > |
03 |
< option value = "AX" >Åland Islands</ option > |
04 |
< option value = "AL" >Albania</ option > |
05 |
< option value = "DZ" >Algeria</ option > |
06 |
< option value = "AS" >American Samoa</ option > |
07 |
< option value = "AD" >Andorra</ option > |
08 |
< option value = "AO" >Angola</ option > |
09 |
< option value = "AI" >Anguilla</ option > |
1 |
$( '#demo' ).selectDropdown(); |
5. Customize the Bootstrap 4 select dropdown with the following options.
01 |
$( '#demo' ).selectDropdown({ |
10 |
multiselectStayOpen: true , |
16 |
observeDomMutations: false , |
22 |
textNoneSelected: "None selected" , |
23 |
textMultipleSelected: "Multiple selected" , |
24 |
textNoResults: "No results" , |
25 |
htmlClear: "Clear search" , |
28 |
classDropdown: "dropdown" , |
29 |
classBtnClear: "btn btn-outline-secondary" , |
30 |
classBtnSearch: "btn btn-primary" , |
32 |
classItem: "dropdown-item" |
Changelog:
v0.14.6 (01/19/2020)
- Enable multiple instances to be loaded dynamically
2018-02-24
2018-05-07
- Version 0.13.11: Bug fix: select buttons not appearing if search element is not present.
2018-04-24
- Version 0.13.9: Refinement: search control focus places cursor at the end of entered text rather than at the start.
2018-04-22
- Version 0.13.8: Added a minimal example. Bug fix: setting search:false led to flawed logic causing the plugin to break.
2018-04-16
- Version 0.13.7: Bug fix: Hover background colour not being removed on hoverRemoveAll().
2018-04-15
- Version 0.13.6: Improved search efficiency by introducing a 300ms keyup delay before executing a search.
2018-04-11
- Version 0.11.1: Fixes for enabled/disabled button states and tooltips.
2018-04-09
- 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.