Select Box with Search Filter
Turn a simple Select box:
Into this:
Supported in:
- IE 8+
- Chrome 8+
- Firefox 10+
- Safari 3+
- Opera 10.6+
Download the latest plugin here: Download
The idea
Select2 hides the old select box(inlined “display: none;”) and replicates it with a new custom select box structure. It ads a “s2id_” before the name of your select box ID. All options within the old select box are inherited by the new select box.
Sample usage:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <link href="select2.css" rel="stylesheet"/> <script src="select2.js"></script> <script> $(document).ready(function() { $("#education").select2(); }); </script> </head> <body> <select id="education"> <option value="AD">Associates Degree</option> ... <option value="BD">Bachelors Degree</option> </select> </body> |
Commonly used parameters:
| placeholder | [string] Placeholder for the select element |
| allowClear | [boolean] true or false. Default is false |
| minimumInputLength | [int] Filters 2 string values |
Usage:
1 2 3 4 5 | $("#education").select2({ placeholder: "Select an option", allowClear: true, minimumInputLength: 5 }); |
Reference Site: http://ivaynberg.github.io/select2/select2-latest.html
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me
