How to Add Search Functionality in Dropdown List Using jQuery

In this tutorial i will let you know how to create dropdown list with Rich UI. Normally HTML provide simple SELECT element to create dropdown list.In this tutorial you will learn how to create 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 library file of chosen plugin.

Select Code
1
2
3
4
5
<head>
  <link rel="stylesheet" href="chosen/chosen.css" />
   <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>
</head>

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

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

Select Code
1
2
3
4
5
6
7
8
9
10
<div>       
        <select data-placeholder="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
          <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 create simple HTMl option list and added class chzn-select.
Step 3: Finally call chosen library method to apply css and functionality on dropdown list.

Select Code
1
2
3
4
5
<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.

  • Anuj Kumar

    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

    • you need to set z-index value.

  • kuldeep

    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,