Jquery Dropdown With Search

dropdown-with-serach-using-jquery

Search is a useful feature for an HTML drop-down list. Especially it will increase user convenience to select items from the drop-down having a long list. In this tutorial, we are going to list city dropdown with a search option. In a previous tutorial, we have seen Google New reCaptcha using PHP – Are you a Robot? .

In this tutorial, we are having a list of items in a Javascript array. We are using the jQuery select2 library to supply these list and to display the dropdown with a search.

dropdown-with-serach-using-jquery

Contents

1- Download and Include
2- HTML
3- jQuery
4- Completed Code

1. Download and Include

1- Download jQueryselect2.min.css  and  select2.min.js library files.
2- Include select2.min.css and select2.min.js with jQuery library insection.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

2. HTML

This code contains an HTML select element referred by its id. With this id reference, it invokes the select2 function to show this dropdown list with a search box. While invoking this function we are passing an array of a country list to the target dropdown element.

<html>
  <body>
    <h1>DropDown with Search using jQuery</h1>
    <div>
      <select id="city" style="width:400px;">
      
      </select>
    </div>
  </body>
</html>

We can also pass remote data to the dropdown from the database or any other data source dynamically. There are many options to provide drop-down list search with added features. For example, we can control the minimum number of input characters we have to type for start searching.

3. jQuery

<script type="text/javascript">
      $(document).ready(function() {
        var city = ["New York", "Washington", "Chicago", "Seattle", "Denver", "Boston", "San Francisco", "Austin", "Portland", "Nashville"];
        $("#city").select2({
          data: city
        });
      });
    </script>

4- Completed Code

 <html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var city = ["New York", "Washington", "Chicago", "Seattle", "Denver", "Boston", "San Francisco", "Austin", "Portland", "Nashville"];
        $("#city").select2({
          data: city
        });
      });
    </script>
   
  </head>
  <body>
    <h1>DropDown with Search using jQuery</h1>
    <div style="margin-left:200px;">
      <select id="city" style="width:400px;">
      <!-- Dropdown List Option -->
      </select>
    </div>
  </body>
</html>

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – we are here to solve your problems.

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply