jQuery Select box search option with Chosen and Bootstrap Plugins example

Posted 8 years ago By Ajay Gupta 193956

There are so many plugins available to live search from bulk of select option.

Select box with live search make you easy to fetch relevant data from range of data.

Bootstrap select is a jquery plugin that have additional functionality for selct box.

Now i will tell you by two way for live search in select box.

Search Box With Live Search Option by Using Chosen Plugin With Example

This make much more easier and user friendly to select box and is a JavaScript Plugin.


<html lang="en">
<head>
    <title>jQuery Chosen Plugin - One of the Best Plugin 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>One of the Best Plugin for Select Box with Search Option</h2>
  <select class="livesearch" style="width:400px;">
  <option>Expert PHP</option>
  <option>Demo PHP</option>
  <option>PHP Tutorials</option>
  <option>PHP Framework</option>
  <option>PHP Libraries</option>
  <option>HTML</option>
  <option>CSS</option>
  <option>JS</option>
  <option>MySQL</option>
  </select>
</div>
<script type="text/javascript">
      $(".livesearch").chosen();
</script>
</body>
</html>

<html lang="en"><head>    <title>jQuery Chosen Plugin - One of the Best Plugin 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>One of the Best Plugin for Select Box with Search Option</h2>  <select class="livesearch" style="width:400px;">  <option>Expert PHP</option>  <option>Demo PHP</option>  <option>PHP Tutorials</option>  <option>PHP Framework</option>  <option>PHP Libraries</option>  <option>HTML</option>  <option>CSS</option>  <option>JS</option>  <option>MySQL</option>  </select></div><script type="text/javascript">      $(".livesearch").chosen();</script></body></html>

Search Box With Live Search Option by Using Bootstrap Select Plugin With Example

You can use bootsrap data live search by simple assign attribute to select box with data-live-search="true"

<html>
  <head>
   <title>Bootstrap Live Search Plugin - One of the Best Plugin Select Box with Live Search Option</title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" />
  </head>
<body>
  <div class="container">
  <h2>One of the Best Plugin for Select Box with Data Live Search Option</h2>
    <div class="row">
      <select class="selectpicker" data-show-subtext="true" data-live-search="true">
       <option>Expert PHP</option>
        <option>Demo PHP</option>
        <option>PHP Tutorials</option>
        <option>PHP Framework</option>
        <option>PHP Libraries</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>JS</option>
        <option>MySQL</option>
      </select>
    
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</body>
</html>

<html>  <head>   <title>Bootstrap Live Search Plugin - One of the Best Plugin Select Box with Live Search Option</title>      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" />  </head>  <div class="container">  <h2>One of the Best Plugin for Select Box with Data Live Search Option</h2>    <div class="row">      <select class="selectpicker" data-show-subtext="true" data-live-search="true">       <option>Expert PHP</option>        <option>Demo PHP</option>        <option>PHP Tutorials</option>        <option>PHP Framework</option>        <option>PHP Libraries</option>        <option>HTML</option>        <option>CSS</option>        <option>JS</option>        <option>MySQL</option>      </select>        </div>  </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script></html>

I prefer you to go with Bootstrap Live Search Plugins.

Show Demo For Bootstrap

Show Demo For Chosen