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

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

jQuery Select2 Library & jQuery 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.

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.

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.

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.

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.

2 Comments

  1. 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 *