Searchable Dropdown Select jQuery Plugin

Are you looking for a jQuery plugin to create a searchable select dropdown? Well! the "selectstyle" jQuery plugin is the right solution to create a custom-styled select dropdown. The plugin comes with search/filter supports and a light/dark theme. Besides this, it has built-in (images) icons for search and dropdown.

You just need to create an HTML native select input with options and this plugin replace it with a custom select box. Then, rendered select dropdown can be further customized with CSS.

You can use this select box anywhere on your web/app project without going into trouble. Because this custom select box based on the native select dropdown and supports all the valid attributes. You can customize it with configuration options and with additional CSS. Likewise, you can get the selected value, and execute custom callback functions on the input change event.

How to Create Searchable Dropdown Select

First of all, load the jQuery JavaScript library and plugin assets (HTML & CSS file) into the head section of your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Selectstyle CSS -->
<link href="src/selectstyle.css" rel="stylesheet" type="text/css">
<!-- Selectstyle JS -->
<script src="src/selectstyle.js"></script>

After that, create your select dropdown with the "true" value for the data-search attribute. Here you can also pass values for width, height, and theme that will be transferred in the plugin configurations. Likewise, the text from the placeholder attribute also shifts to the custom rendered select box. So, you can specify any valid attribute in your select element.

<select theme="google" width="400" style="" placeholder="Select Your Favorite" data-search="true">
	<option value="AF">Afghanistan</option>
	<option value="AX">Åland Islands</option>
	<option value="AL">Albania</option>
	<option value="DZ">Algeria</option>
	<option value="AS">American Samoa</option>
	<option value="AD">Andorra</option>
	<option value="AO">Angola</option>
	<option value="AI">Anguilla</option>
	<option value="AQ">Antarctica</option>
	<option value="AG">Antigua and Barbuda</option>
	<option value="AR">Argentina</option>
	<option value="AM">Armenia</option>
	<option value="AW">Aruba</option>
	<option value="AU">Australia</option>
	<option value="AT">Austria</option>
	<option value="AZ">Azerbaijan</option>
	<option value="BS">Bahamas</option>
	<option value="BH">Bahrain</option>
	<option value="BD">Bangladesh</option>
	<option value="BB">Barbados</option>
</select>

Initialize plugin in the jQuery document ready function. You can set a custom value for the width and height. Similarly, you can decide whether to use a light or dark theme for the select box in its configurations.

jQuery(document).ready(function($) {
	$('select').selectstyle({
		width  : 400,
		height : 300,
		theme  : 'light',
	});
});

The above initialization replaces all the select dropdown with a custom select box. It’s best practice to initialize the plugin with an id selector of a specific select element. Besides this, if you have multiple select elements on the same page, you can separately configure each select box.

Plugin Configuration Options

The following are some useful configuration options to customize the working of the plugin.

$('select').selectstyle({
	width : 400,
});

$('select').selectstyle({
	height : 300,
});

$('select').selectstyle({
	theme : 'light',
});

$('select').selectstyle({
	onchange : function(val){},
});

That’s all! I hope this jQuery plugin fulfills your needs to create a searchable select dropdown. If you have any questions related to HTML forms and input fields, let me know by comment below.