This time I will share jQuery Plugin and tutorial about Live Filter For Select Box – jQuery sel_filter.js, hope it will help you in programming stack.
The jQuery sel_filter.js plugin adds an inline search field to the select box that allows the user to filter select options in real-time.
How to use it:
1. Load the jquery.sel_filter.js
script after the latest version of jQuery JavaScript library (slim build).
2 |
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin = "anonymous" ></ script > |
4 |
< script src = "jquery.sel_filter.js" ></ script > |
2. Call the function on the regular select
element.
02 |
< option >Germany ABUS</ option > |
03 |
< option >China AEE</ option > |
04 |
< option >Taiwan Aiptek</ option > |
05 |
< option >France Alcatel</ option > |
06 |
< option >Switzerland Alpa</ option > |
07 |
< option >United States Apple</ option > |
08 |
< option >United States Arecont Vision</ option > |
3 |
$( "#demo" ).sel_filter(); |
3. The example CSS to style & position the live search/filter input. Feel free to customize the search input field with your own CSS styles.
03 |
background : url ( 'jquery.sel_filter.png' ) 100% 50% no-repeat ; |
05 |
filter: alpha(opacity= 40 ); |
11 |
border-collapse : collapse ; |
14 |
.sel_filter_tb td { padding : 0 ; } |
4. Available plugin options with default values.
01 |
$( "#demo" ).sel_filter({ |
This awesome jQuery plugin is developed by zolll23. For more Advanced Usages, please check the demo page or visit the official website.