This time I will share jQuery Plugin and tutorial about Custom Select Dropdown With Search Box – Amsifyselect.js, hope it will help you in programming stack.
Amsifyselect.js is an improved, progressive enhancement custom select dropdown jQuery plugin for stylizing and manipulating the native HTML select element with searchable options.
Features:
- Fully styled.
- Supports Materialize & Bootstrap frameworks.
- Search Box to filter through options.
- Supports both single and multiple selection.
- Allows you to specify the max number of options to select.
- Optgroup is supported as well.
How to use it:
1. Load the stylesheet ‘amsify.select.css’ and JavaScript ‘amsify.select.js’ in the HTML document.
1 |
< link rel = "stylesheet" href = "/path/to/css/amsify.select.css" /> |
2 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
3 |
< script src = "/path/to/js/jquery.amsifyselect.js" ></ script > |
2. To make options searchable, add the ‘searchable’ attribute to your HTML list as follows:
01 |
< select name = "country" multiple searchable> |
02 |
< option value = "" >Select Country</ option > |
03 |
< optgroup label = "Asia" > |
04 |
< option value = "1" >India</ option > |
05 |
< option value = "2" >Afghanistan</ option > |
06 |
< option value = "3" >Bangladesh</ option > |
07 |
< option value = "4" >Nepal</ option > |
08 |
< option value = "5" >Sri Lanka</ option > |
10 |
< optgroup label = "America" > |
11 |
< option value = "6" >USA</ option > |
12 |
< option value = "7" >Canada</ option > |
13 |
< option value = "8" >West Indies</ option > |
14 |
< option value = "9" >Chile</ option > |
15 |
< option value = "10" >Argentina</ option > |
17 |
< optgroup label = "Africa" > |
18 |
< option value = "11" >South Africa</ option > |
19 |
< option value = "12" >Nigeria</ option > |
20 |
< option value = "13" >Algeria</ option > |
21 |
< option value = "14" >Somalia</ option > |
22 |
< option value = "15" >Sudan</ option > |
3. Call the plugin and apply the default theme to the custom select dropdown. Done.
1 |
$( 'select' ).amsifySelect({ |
4. The plugin also works with the latest Bootstrap & Materialize frameworks.
1 |
$( 'select' ).amsifySelect({ |
1 |
$( 'select' ).amsifySelect({ |
5. You can also enable the searchable functionality in the JavaScript.
1 |
$( 'select' ).amsifySelect({ |
6. Determine the max number of options allowed to select. Default: 30.
1 |
$( 'select' ).amsifySelect({ |
7. Determine the max number of labels allowed to show. Default: 5.
1 |
$( 'select' ).amsifySelect({ |
8. Customize the Clear & Close buttons displayed at the bottom of the dropdown list.
1 |
$( 'select' ).amsifySelect({ |
9. Refresh the select dropdown in case new options are added.
1 |
$( 'select' ).amsifySelect({ |
10. Destroy the select dropdown.
1 |
$( 'select' ).amsifySelect({ |
This awesome jQuery plugin is developed by amsify42. For more Advanced Usages, please check the demo page or visit the official website.