When it comes to select the data from the drop-down list, if there is no searching in a select box, then it creates little bit trouble for users to navigate on proper data. So it is recommended to keep the searching option in the select box if there are large data.
Today we are going to share the post about a plugin name Chosen Plugin for the select box. It is very simple and easy to integrate into the project.
You have to include required JS and CSS in the main file and need to add the chosen class in the select box where you need searching.
The following is complete code, how to integrate search option in select box.
<html lang="en">
<head>
<title>Select box with search option in Jquery with example</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:500px;margin:0px auto;margin-top:30px;">
<h2> Select box with search option in Jquery with example </h2>
<select class="chosen" style="width:500px;">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
<option>Jquery</option>
<option>PHP Class</option>
<option>Python</option>
<option>Go</option>
<option>Ruby</option>
</select>
</div>
<script type="text/javascript">
$(".chosen").chosen();
</script>
</body>
</html>
How to select multiple options from a drop-down list in HTML
You can also integrate the multiple select options. For that, you only need to add multiple in select box
<select class="chosen" multiple>You can find more detail about the plugin at https://harvesthq.github.io/chosen/
