How to create HTML select box with searching support using jQuery
In this tutorial I will show you that how to create select box with searching support you can search your desired option rather than finding it by scroll. I have used a jQuery plugin select2 to implement this tasks, its very easy and simple to understand it help you to give facility to users if you have large lists to select.
Used a jQuery plugin select2
Also Read: How to make search input to filter through list using jQuery
How to use it:
Include jQuery libraries and css
<link href="select2.css" rel="stylesheet"/> <script src="select2.js"></script>
jQuery select2 trigger:
<script>
$(document).ready(function() {
$("#states").select2({
placeholder: "Select a State",
allowClear: true
});
});
</script>This jQuery covert your normal select box with a quick filter support via a search input inside.
In the options we added a placeholder which show any placeholder on empty select box and allow clear give option to clear select box on single click.
HTML list:
<select id="states">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
...
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>For complete list download code, we have a very nice demo available for this you can check this in working.
That’s all for today I hope it helps you so please don’t forget to share your feedback in comments and do share with friends.
Tutorial Categories:
Useful article I too have used a jquery plugin select2 to implement this task,really it made me easy and simple to understand and to give facility to users when having large list to select.Found good information and for information html tutorials and php projects click on – http://netultimateschool.com/category/courses/html-courses/
so simple in jquery.
Thanx
very nice 🙂
i was use this code but not working .i used for another template.that was reflect normal select box there was nothing happening search option….what can i do
Check on console for JavaScript errors and paste error on comments.
hi sir, i tried ..so now its run perfectly!!! thank you!!
hi sir how to select multiple items in this select box?
when i am going to download the script its not comming..
hi sir! how r u ? i have one doubt that is, i run one php page that is read xlsx file and store that data in mysql .this should be working very rarely.most of the time i am getting 500 internal server error. how can i solve this problem please help to this.
Turn on errors and send error message, 500 error means: https://mediatemple.net/community/products/dv/204644990/why-am-i-getting-a-500-internal-server-error-message
Huzoor bux ????
Maaaan thats the thing i was searching for!! Thanks so much!!
DL ain’t working
Can not Subscrib to download!!
cant download the code sir.
Hi.
i am making a php blog.
i have id,title,category,body,tags,author field in my database table.
i want a search module for it.
Please send my the code.
Please reply fast.