Today i am writing about how to implement searchable dropdown list in asp.net mvc 4. Actually i came across a scenario where the drop down elements were too large and its troublesome for user to find the option that user wants to select to i needed to add searching so that it becomes easy for user.


To Implement this i used a jquery library namely Jquery chosen you can find it by searching on google or can download from here,Its pretty simple actually you just need to include the jquery chosen js file and css file in your porject and after that one simple step to do and you are done.

You have to add css classattribute value  "chosen-select" in the dropdown select attribute.

For Example, Here is my dropdown html:

<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL">

  <option value="1">Hematology (2)</option>
  <option value="2">Clinical Chemistry (0)</option>
  <option value="3">Histopatholgy (0)</option>
  <option value="8">Molecular Lab (0)</option>
  <option value="9">General Radiology (0)</option>
  <option value="10">Ultrasound (0)</option>
  <option value="12">ECG (0)</option>
  <option selected="selected" value="13">Microbiology (0)</option>
  <option value="14">Blood Bank (0)</option>
  <option value="16">Special Chemistry (1)</option>
  <option value="18">Services (0)</option>
  <option value="19">International Send Outs - India (0)</option>
  <option value="20">National Send Outs (0)</option>
  <option value="21">Vaccination (0)</option>
  <option value="22">ABC (0)</option>

</select>

you will have to include the follwing js and css files you will find the downloaded jquery chosen folder:

<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css">
<link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script>
<script type="text/javascript" src="/PulseBeta/js/prism.js"></script>

Now in the page write this script and you are done:

<script type="text/javascript">

         var config = {
             '.chosen-select': {},
             '.chosen-select-deselect': { allow_single_deselect: true },
             '.chosen-select-no-single': { disable_search_threshold: 10 },
             '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
             '.chosen-select-width': { width: "95%"}//,
             //'.chosen-search': {disable_search: false}
         }
         for (var selector in config) {
             $(selector).chosen(config[selector]);
         }

</script>

Before this my dropdown like this:







and after applying chosen plugin the result is:





Cheers...