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.

Also checkout other tutorials of select2,

• Part 1 – How to Integrate Chosen in HTML dropdown list
• Part 2 – How to Select All element of SELECT2
• Part 3 – How to add Custom message into 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.