April 24, 2014 12:58 pm

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.

How to create HTML select box with searching support using jQuery

[wpdm_file id=99]DEMO

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.

[wpdm_file id=99]DEMO

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

16 responses to “How to create HTML select box with searching support using jQuery”

  1. Vishnu Priya says:

    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/

  2. Rahul Sati says:

    so simple in jquery.
    Thanx

  3. vasanth says:

    very nice 🙂

  4. Dinesh Kumar says:

    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

  5. Dinesh Kumar says:

    hi sir, i tried ..so now its run perfectly!!! thank you!!

  6. Dinesh Kumar says:

    hi sir how to select multiple items in this select box?

  7. mounesh badiger says:

    when i am going to download the script its not comming..

  8. Dinesh Kumar says:

    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.

  9. Dinesh Kumar says:

    Huzoor bux ????

  10. Pablo Navarro says:

    Maaaan thats the thing i was searching for!! Thanks so much!!

  11. Slinjez says:

    DL ain’t working

  12. maus says:

    Can not Subscrib to download!!

  13. Sanket Angchekar says:

    cant download the code sir.

  14. prathamesh jadhav says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *