Select Box with Search Option using jQuery


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

Article By
Javed Ur Rehman is a passionate blogger and web developer, he loves to share web development tutorials and blogging tips. He usually writes about HTML, CSS, JavaScript, Jquery, Ajax, PHP and MySQL.
    1. Aan, you will need to make sure in your console that there is no error regarding ajax library and select2.min.js.
      If any of these files are not included then it will not work, you can download code and try to execute the code.
      Hope this will solve your issue.

  1. Hi Javed,
    I used the scripts that you mentioned in this article, it is not working for me. It is appearing just like the default select box. There is no error in the console. I’m using jquery 3.4.1.

    Thanks

  2. Hi Javed, Im not able to search on dynamic data. i.e. If data is coming from api. It’s working on static option but not on dynamic option.

    1. Hi Suresh, well you will always get the value of these countries upon form submission but if you also want the country name, then you have two ways, either on the form submission query the database table of country and get the country name or you can set hidden input field in your form and on the change country event, get the country name using the $(“#country”).text(); and pass its value to your hidden field and get the value of that field on form submission, hope this will help you.

  3. Hi
    Very nice tools
    Any ideas how I can increase the height of select2-results. It only shows few results (as for the example, only 5).

    1. Hi Jean-Paul, thanks for liking it.
      Well as you can see that we are using library and it has its own css, all you need to overwrite the css of library in your file, using !important with the same class which has fixed the height of that box. You can use browser code inspector to find the class.

Leave a Reply

Your email address will not be published. Required fields are marked *