This time I will share jQuery Plugin and tutorial about Select Box With Searchable Options – jQuery Searchbox, hope it will help you in programming stack.
Searchbox is a jQuery select box replacement plugin that turns a normal <select>
element into a fully styleable dropdown list where the users are able to filter through options with a searchbox as well as add new options to the list just like a tags input.
How to use it:
1. Load the Searchbox plugin’s script after loading jQuery JavaScript library as follows:
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/dist/js/jquery-searchbox.js" ></ script > |
2. Just attatch the function searchBox
to the existing select
element and the plugin will do the rest.
01 |
< select name = "lang" class = "js-searchBox" > |
02 |
< option value = "" >Select A Language</ option > |
03 |
< option value = "1" >Python</ option > |
04 |
< option value = "2" >Java</ option > |
05 |
< option value = "3" >Ruby</ option > |
06 |
< option value = "4" >C/C++</ option > |
07 |
< option value = "5" >C#</ option > |
08 |
< option value = "6" >JavaScript</ option > |
09 |
< option value = "7" >PHP</ option > |
10 |
< option value = "8" >Swift</ option > |
11 |
< option value = "9" >Scala</ option > |
12 |
< option value = "10" >R</ option > |
13 |
< option value = "11" >Go</ option > |
14 |
< option value = "12" >VisualBasic.NET</ option > |
15 |
< option value = "13" >Kotlin</ option > |
1 |
$( '.js-searchBox' ).searchBox(); |
3. The results. Note that the option value will be stored in the input field as shown below.
01 |
< input type = "text" class = "refineText formTextbox" > |
02 |
< select name = "lang" class = "js-searchBox" style = "display: none;" > |
03 |
< option value = "" >Select A Language</ option > |
04 |
< option value = "1" >Python</ option > |
05 |
< option value = "2" >Java</ option > |
06 |
< option value = "3" >Ruby</ option > |
07 |
< option value = "4" >C/C++</ option > |
08 |
< option value = "5" >C#</ option > |
09 |
< option value = "6" >JavaScript</ option > |
10 |
< option value = "7" >PHP</ option > |
11 |
< option value = "8" >Swift</ option > |
12 |
< option value = "9" >Scala</ option > |
13 |
< option value = "10" >R</ option > |
14 |
< option value = "11" >Go</ option > |
15 |
< option value = "12" >VisualBasic.NET</ option > |
16 |
< option value = "13" >Kotlin</ option > |
18 |
< ul class = "searchBoxElement" > |
19 |
< li data-selected = "off" data-searchval = "" class = "selected" >< span >Select A Language</ span ></ li > |
20 |
< li data-selected = "off" data-searchval = "1" >< span >Python</ span ></ li > |
21 |
< li data-selected = "off" data-searchval = "2" >< span >Java</ span ></ li > |
22 |
< li data-selected = "off" data-searchval = "3" >< span >Ruby</ span ></ li > |
23 |
< li data-selected = "off" data-searchval = "4" >< span >C/C++</ span ></ li > |
24 |
< li data-selected = "off" data-searchval = "5" >< span >C#</ span ></ li > |
25 |
< li data-selected = "off" data-searchval = "6" >< span >JavaScript</ span ></ li > |
26 |
< li data-selected = "off" data-searchval = "7" >< span >PHP</ span ></ li > |
27 |
< li data-selected = "off" data-searchval = "8" >< span >Swift</ span ></ li > |
28 |
< li data-selected = "off" data-searchval = "9" >< span >Scala</ span ></ li > |
29 |
< li data-selected = "off" data-searchval = "10" >< span >R</ span ></ li > |
30 |
< li data-selected = "off" data-searchval = "11" >< span >Go</ span ></ li > |
31 |
< li data-selected = "off" data-searchval = "12" >< span >VisualBasic.NET</ span ></ li > |
32 |
< li data-selected = "off" data-searchval = "13" >< span >Kotlin</ span ></ li > |