Searchable Dropdown Select jQuery Plugin

Category: Text & Input | September 11, 2020
Searchable Dropdown Select jQuery Plugin
Author: Wajahat Qasim
Official Page: Go to Website
Last Update:September 11, 2020
License:MIT

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.

OptionDefaultTypeDescription
width400NumberThis option specifies the width of the custom select box.

Example:

$('select').selectstyle({
	width : 400,
});
height300NumberThe height of the dropdown list. If the list contains the more options then a scroll bar added to the dropdowns.

Example:

$('select').selectstyle({
	height : 300,
});
theme‘light’StringIt defines the theme for a select box. Possible options are: “light” and “dark”.

Example:

$('select').selectstyle({
	theme : 'light',
});
onchangefunction(val){}FunctionThis option is useful to execute the custom function on a select option change event.

Example:

$('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.

You May Also Like

Leave a Comment

16 − twelve =

This site uses Akismet to reduce spam. Learn how your comment data is processed.