Demo Download

In this tutorial, I will explain how to create a select box with search option using jquery, you must have seen on various websites that when you open html select box, it also provides you an option to write in input field to make your selection easier. This enhance the user experience of your web application.

I will use the select2 library to implement select box with search option, this require a jquery library, so we will need to include jquery library.

jQuery Library

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

Add the above library in the footer section, ideally should be before closing </body> tag.

jQuery Select2 Library & jQuery Script

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

Include the above select2 library after jquery library and before closing </body> tag.

HTML

Create a select box with your desired select options, in here i am using country select example, following are just few countries name, you can add as much you want.

<select id="country">
	<option value="">Select Country</option>
	<option value="586">Pakistan</option>
	<option value="682">Saudi Arabia</option>
	<option value="784">United Arab Emirates</option>
	<option value="826">United Kingdom</option>
	<option value="840">United States</option>
</select>

As you can see in above code that i have given id name #country, which we will use to implement search option in select box.

CSS

Include this CSS in your head section.

<link rel="stylesheet" href="select2.min.css" />

You can download both CSS and Select2.js from the download file in the below link:

In case if you face input box alignment issue, then you can add the following CSS to fix alignment issue.

.select2-dropdown {
 top: 22px !important;
 left: 8px !important;
}

I tried my best to explain it, if anyone still have any problem then you can leave your comment in the below comment section.

Demo Download

If you found this tutorial helpful, share it with your friends and developers group.

Facebook Official Page: All PHP Tricks

Twitter Official Page: All PHP Tricks