How to Add Search Functionality in Dropdown List with Jquery Plugin

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 from Here.
Below are simple example to learn dropdown list with search functionality.
Step 1: First we will add library file of chosen plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
  <style>
    .clearfix:after {
      content: "�020";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
      visibility: hidden;
    }
  </style>
  <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>

Step 2: Now we will add HTMl dropdown list.

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>

Step 3: Finally call chosen library method to apply css and functionality on dropdown list.

1
2
3
4
5
6
<script type="text/javascript"> 
  jQuery(document).ready(function(){
  $("#choDDL").chosen(); 
  $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
  });
  </script>

Step 4: Result :

search-dropdownlist

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 6 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

4 thoughts on “How to Add Search Functionality in Dropdown List with Jquery Plugin

  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,

Leave a Reply

Your email address will not be published. Required fields are marked *