How to Add Search Functionality in Dropdown List Using jQuery

In this tutorial, i will let you know how to create a dropdown list with Rich UI. Normally HTML provides a simple SELECT element to create a dropdown list.

Here, you will learn how to create a dropdown list with search functionality with help of excellent 'chosen' jquery plugin, you can download chosen from Here.

search-dropdownlist

Also checkout other tutorials of select2,

Simple Example of jQuery Searchable DropDown list Using Chosen

Step 1: First we will add the library file of the chosen plugin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>

Here we have include chosen.css and chosen.js file with jQuery dependency.

Step 2: Now we will add the HTML drop-down list.

<div>
<select class="chzn-select" style="width: 350px;" tabindex="2" data-placeholder="Choose a Country...">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select></div>

We have created a simple HTMl option list and added class chzn-select.
Step 3: Finally call chosen library method to apply css and functionality on the dropdown list.

<script type="text/javascript"> 
  $(document).ready(function(){
	$("select").chosen({allow_single_deselect:true});
   });
</script>

We have applied chosen method on all select elements, You can apply on '#selectid' or '.ClassName'.

Live Demo & Download Source Code

Please feel free to send queries to me using below comment section.

9 thoughts on “How to Add Search Functionality in Dropdown List Using jQuery

  1. hi, thanks for the tutorial, but i am not able to type anything in input field as you show in your example image. what to do now.
    Thanks

  2. Hello,

    i have download that but not get anu choosen.css and chosen.js file.
    while i run index.html under public fiolder it run but search functionality missing what i do.
    please help me……….

    thanks,

  3. Sir Thanks for this.. it really helped.. I just need your support to make it respnosive.. I have applied it to AdminLTE and the form is fully responsive except the Drop-down.. So please help

Leave a Reply

Your email address will not be published.