Select box with search option in Jquery by using Chosen Plugin

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will talk about Select box with search option in Jquery by using Chosen Plugin. There are several plugins are available in google as like as select2,selectbox etc, But i was found Chosen Plugin for the select box also with search option. We can also use this with bootstrap.

Here I will give you a full example of select box also with search option.

Example:
<html lang="en">
<head>
    <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="http://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>
</head>
<body>


<div style="width:520px;margin:0px auto;margin-top:30px;">
  <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>
</div>


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


</body>
</html>

Read Also: Generate Captcha code and Validation by using BotDetect package in laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →