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 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 4 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

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>