How to create HTML Select box with search option support using jQuery

Last updated Mar 11, 2018

There are several plugins available in google like select2,selectbox etc, But i found Chosen Plugin for select box with search option. You can also use with bootstrap. I give you full example of select box with search option. After run this example you will find bellow preview.

In this tutorial I will show you that how to create select box with searching support you can search your desired option rather than finding it by scroll. I have used a jQuery plugin select2 to implement this tasks, its very easy and simple to understand it help you to give facility to users if you have large lists to select.

    <title>Jquery Chosen - Select Box with Search Option</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
 

 
  <h2>Select Box with Search Option Jquery</h2>
  <select class="chosen" style="width:500px;">
  <option>PHP</option>
  <option>PHP Array</option>
  <option>PHP Object</option>
  <option>PHP Wiki</option>
  <option>PHP Variable</option>
  <option>Java</option>
  <option>C</option>
  <option>C++</option>
  </select>
 

<script type="text/javascript">
      $(".chosen").chosen();
</script>