Select Box with Search Option

Using the jQuery "Chosen" files, you can create a select box dropdown with a search field option.

by Jon Fuller

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<div class="custom-dropdown">
	<h2>Select Box with Search Option Jquery</h2>
	<select>
		<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>
<br>
<a href="https://harvesthq.github.io/chosen/" target="_blank">https://harvesthq.github.io/chosen/</a>
<p>
	You'll need the <a href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">chosen CSS</a> and the <a href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js">chosen JS</a> files.
</p>

JavaScript

jQuery(".custom-dropdown select").chosen();