How to generate HTML select box with searching using jQuery

Today I am gonna to give you a tutorial on select box with searching support revenues you can search your desired option rather than finding it by scroll. I have used a jQuery plugin select2 to implement these tasks; it’s very easy and simple to know it help you to give facility to users if you have large lists to select.

Used a jQuery plugin select2

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.

Demo Download

I hope you like this simple script to add like and un-like feature in your websites please update me with your feedback in comments below

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.