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

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

jQuery select2 trigger:

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:

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.

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:
  • Vishnu Priya

    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

  • vasanth

    very nice 🙂

  • Dinesh Kumar

    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.

  • Dinesh Kumar

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

  • Dinesh Kumar

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

  • mounesh badiger

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

  • Dinesh Kumar

    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.

  • Dinesh Kumar

    Huzoor bux ????