select box with search option in jquery – DropDown with Search using jQuery

select box with search option in jquery. There are several plugins available in google like select2,selectbox etc. here we can learn to Chosen Plugin for select box with search option example.

select box with search option in jquery

Create a select box with your desired select options jQuery Select box search option with Chosen and Bootstrap Plugins example with demo.

simple Example

<input list="category">
<datalist id="category">
  <option value="Mobile">
  <option value="Laptop">
  <option value="Dasktop">
  <option value="Iphone">
  <option value="LCD">
</datalist>  

Creating a select box with a search option

jQuery Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

jQuery Select2 Library & jQuery Script

<script src="select2.min.js"></script>
<script>
$("#planguages").select2( {
	placeholder: "Select planguages",
	allowClear: true
	} );
</script>

HTML Code

<select id="planguages">
	<option value="">Select planguages</option>
       <option value="2555">Laravel</option>
        <option value="6556">Vuejs</option>
        <option value="2505">Angularjs</option>
        <option value="5666">ReactJS</option>
        <option value="3656">JavaScript</option>
        <option value="5487">Magento</option>
        <option value="8569">Wordpress</option>
        <option value="5665">ASP.NET</option>
        <option value="5656">DATABASE</option>
</select>

CSS Code

<link rel="stylesheet" href="select2.min.css" />
<style>
.select2-dropdown {
 top: 22px !important;
 left: 8px !important;
}
</style>

Select Box with Search Option using jQuery

jQuery Select box search option with Chosen and Bootstrap Plugins example
index.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>Laravel</option>
        <option>Vuejs</option>
        <option>Angularjs</option>
        <option>ReactJS</option>
        <option>JavaScript</option>
        <option>Magento</option>
        <option>Wordpress</option>
        <option>ASP.NET</option>
        <option>DATABASE</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

index.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>
<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>Laravel</option>
        <option>Vuejs</option>
        <option>Angularjs</option>
        <option>ReactJS</option>
        <option>JavaScript</option>
        <option>Magento</option>
        <option>Wordpress</option>
        <option>ASP.NET</option>
        <option>DATABASE</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>

Multi select dropdown list with checkbox using jquery

Also Read This πŸ‘‰   Laravel 5.7 JQuery Form Validation Example Tutorial

I hope you get an idea about select box with search option in jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.