How to make an HTML select dropdown with a search box

John Mwaniki / Updated on 07 Jul 2024

HTML select elements are an essential component of web forms. They are especially important in the instances where you want users to choose from a predefined list of options, instead of them entering their own inputs.

This helps reduce redundancy in the system.

For instance, if you were to require the users to enter their country, but allow them to type in the country name or code instead of selecting it, this would introduce a problem.

Suppose the user's country is the USA. Some users would write "United States of America", others "USA", others "United States", while others would misspell the name, or write in all upper or lowercase letters.

It would be a disaster trying to organize, analyze, and present the information based on the users' country. This shows why HTML select dropdown is quite an important form element.

However, when dealing with a lengthy list of options, finding the desired option can become challenging.

To address this usability issue, integrating a search functionality into the select element can provide a convenient way to filter options and find the desired items quickly, thus significantly enhancing the user experience.

In this article, I will take you through various approaches to implementing an HTML select with a search box in pure HTML and bootstrap forms, providing users with a convenient and efficient way to locate their desired options.

Creating an HTML dropdown select

First, we will create a sample form on both pure HTML and in Bootstrap, with a dropdown select option but without the search box. Then I will show you how to add it.

HTML form with dropdown select

#country {
    height: 35px;
    border: 1px solid #ddd;
    padding-left: 10px;
}

<select id="country">
   <option value="">Select your country</option>
   <option value="US">United States of America</option>
   <option value="KE">Kenya</option>
   <option value="UK">United Kingdom</option>
   <option value="IN">India</option>
   <option value="CN">China</option>
   <option value="CA">Canada</option>
   <option value="RU">Russia</option>
   <option value="DE">Germany</option>
   <option value="ZA">South Africa</option>
   <option value="BR">Brazil</option>
</select>

Below is the output of the above code :

Bootstrap form with dropdown select

<div class="form-group">
   <select class="form-control" id="country">
      <option value="">Select your country</option>
      <option value="US">United States of America</option>
      <option value="KE">Kenya</option>
      <option value="UK">United Kingdom</option>
      <option value="IN">India</option>
      <option value="CN">China</option>
      <option value="CA">Canada</option>
      <option value="RU">Russia</option>
      <option value="DE">Germany</option>
      <option value="ZA">South Africa</option>
      <option value="BR">Brazil</option>
   </select>
</div>

Below is the output of the above code :

From the examples above, there seems to be no need for a search box since we have only 10 countries in our options which are all visible at once. But when we include a full list of 195 countries, a search filter will be more than necessary to easily find the country when we start to type its name in the search box.

Below is how we do it.

Adding a search box to HTML select dropdown

We now will go ahead and add a search box to the forms in the above examples.

There are multiple ways of adding a search functionality to HTML select elements. In this article, we will cover 4 methods of doing it:

1. Using Select2 plugin
2. Using Slim Select plugin
3. Using Selectize plugin
4. Using Tom Select plugin

1. Using Select2 plugin

Select2 is a jQuery-based replacement for select boxes. It supports searching remote data sets and infinite scrolling of results.

It is compatible with all the major web browsers which include:

IE 8+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+

To start using it, we will need to include the Select2 compiled JavaScript and CSS files on our website. Then, we will initialize the select2 with select dropdown element using jQuery.

There are two main ways of adding Select2 to the website:

Loading Select2 from a CDN
Self-hosting it in your project

1. Loading Select2 from a CDN

Including Select2 from a CDN (content delivery network) is the fastest way to set it up and start using it.

This is the recommended way to include it. This makes it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released.

To include it using this method, simply include the following lines of code in the <head> section of your page.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

The first line adds the jQuery library, which is required for Select2 to work, while the other two lines import the Select2 JS and CSS files.

2. Self-hosting Select2 in your project

To host it locally in your website project, download the Select2 release of your choice from GitHub and copy the files to the dist directory to your project.

Then in the same way as using from CDN, add the following lines of code in the <head> section of your page.

<script src="path/to/file/jquery.min.js"></script>
<link href="path/to/file/select2.min.css" rel="stylesheet" />
<script src="path/to/file/select2.min.js"></script>

Replace above, the "path/to/file/" with the path to your files.

Note: In either of the two methods, make sure to import the jQuery library into your code before importing the select2 plugin or else it won't work.

Initializing Select2 in your form dropdown select

After loading the Select2 JS and CSS files, the next step is to initialize it into your <select> element. Add the line of code below with the select element ID value inside the jQuery on ready function.

$("#idselector").select2();

Example

<script>
 $(function(){
  $("#idselector").select2();
 }); 
</script>

If you want to add a search box to all the select elements on the page, use "select" as the selector instead of the ID value.

Example

$(function(){
  $("select").select2();
 });

You may also be interested in:
How to add Sort, Pagination, and Search Filter in HTML Tables

Examples

HTML form with dropdown select and search box

<!DOCTYPE html>
<html>
<head>
<title>HTML form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<style>
    #country {
        height: 35px;
        border: 1px solid #ddd;
        padding-left: 10px;
    }
</style>
</head>
<body>
   <select id="country">  
     <option value="">Select your country</option>
     <option value="US">United States of America</option>
     <option value="KE">Kenya</option>
     <option value="UK">United Kingdom</option>
     <option value="IN">India</option>
     <option value="CN">China</option>
     <option value="CA">Canada</option>
     <option value="RU">Russia</option>
     <option value="DE">Germany</option>
     <option value="ZA">South Africa</option>
     <option value="BR">Brazil</option>
  </select>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
 $(function(){
  $("#country").select2();
 }); 
</script>
</body>
</html>

Below is the output of the code above :

Interact with it and try searching for different countries. As soon as you start typing in the search box, the plugin filters from the list of options and shows you only those that match your search in real-time.

Take note of the selector "#country" in initializing the select2. We have used it because it is the id of our country's input field.

Bootstrap form with dropdown select and search box

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<style>
#country {
    height: 35px;
    max-width: 400px;
}
</style>
</head>
<body>
  <div class="form-group">
    <select class="form-control" id="country">  
       <option value="">Select your country</option>
       <option value="US">United States of America</option>
       <option value="KE">Kenya</option>
       <option value="UK">United Kingdom</option>
       <option value="IN">India</option>
       <option value="CN">China</option>
       <option value="CA">Canada</option>
       <option value="RU">Russia</option>
       <option value="DE">Germany</option>
       <option value="ZA">South Africa</option>
       <option value="BR">Brazil</option>
    </select>
  </div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
 $(function(){
  $("#country").select2();
 }); 
</script>
</body>
</html>

Below is the output of the code above :

As you may have noticed above, after initializing Select2 on our dropdown select, its height was reduced compared to how it was earlier.

To set it to your custom height, just add the CSS code below in the head section of your page.

.select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container .select2-selection--single {
    height: 38px !important;
}
.select2-selection__arrow {
    height: 37px !important;
}

Remember to height property value to your desired one.

2. Using the Slim Select plugin

Slim Select is an easy-to-use JavaScript library for advanced search. It allows single and multiple-select among other features.

It's very similar in appearance and functionality to Select2.

It's lightweight and has no dependencies. Unlike Select2, you don't need to include jQuery or any other library in order for it to work on your pages.

Installing Slim Select

To install Slim Select on your website, just include the JS and CSS file from a CDN (cdnjs or jsdelivr) in your pages.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.css" integrity="sha512-QhrDqeRszsauAfwqszbR3mtxV3ZWp44Lfuio9t1ccs7H15+ggGbpOqaq4dIYZZS3REFLqjQEC1BjmYDxyqz0ZA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.js" integrity="sha512-mG8eLOuzKowvifd2czChe3LabGrcIU8naD1b9FUVe4+gzvtyzSy+5AafrHR57rHB+msrHlWsFaEYtumxkC90rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Alternatively, you can download the files and host them locally in your project.

Initializing Slim Select

After loading the CSS and JS files on your page, you need to initialize Slim Select on the select element that you want to add a search filter feature. You do this by targeting its ID attribute or class value as the selector. You can also use the element name (select) as the selector if you want to make all the select elements in the page searchable.

new SlimSelect({
    select: "selector"
});

Examples

Creating HTML select with a search using Slim Select

<!DOCTYPE html>
<html>
<head>
<title>HTML dropdown select with search</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.css" integrity="sha512-QhrDqeRszsauAfwqszbR3mtxV3ZWp44Lfuio9t1ccs7H15+ggGbpOqaq4dIYZZS3REFLqjQEC1BjmYDxyqz0ZA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
   <select id="country">  
     <option value="">Select your country</option>
     <option value="US">United States of America</option>
     <option value="KE">Kenya</option>
     <option value="UK">United Kingdom</option>
     <option value="IN">India</option>
     <option value="CN">China</option>
     <option value="CA">Canada</option>
     <option value="RU">Russia</option>
     <option value="DE">Germany</option>
     <option value="ZA">South Africa</option>
     <option value="BR">Brazil</option>
  </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.js" integrity="sha512-mG8eLOuzKowvifd2czChe3LabGrcIU8naD1b9FUVe4+gzvtyzSy+5AafrHR57rHB+msrHlWsFaEYtumxkC90rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  new SlimSelect({
     select: "select"
  });
</script>
</body>
</html>

Below is the output of the above code :

Creating a Bootstrap dropdown select with a search option using Slim Select

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.css" integrity="sha512-QhrDqeRszsauAfwqszbR3mtxV3ZWp44Lfuio9t1ccs7H15+ggGbpOqaq4dIYZZS3REFLqjQEC1BjmYDxyqz0ZA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
  <div class="form-group">
    <select class="form-control" id="country">  
       <option value="">Select your country</option>
       <option value="US">United States of America</option>
       <option value="KE">Kenya</option>
       <option value="UK">United Kingdom</option>
       <option value="IN">India</option>
       <option value="CN">China</option>
       <option value="CA">Canada</option>
       <option value="RU">Russia</option>
       <option value="DE">Germany</option>
       <option value="ZA">South Africa</option>
       <option value="BR">Brazil</option>
    </select>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/2.8.0/slimselect.min.js" integrity="sha512-mG8eLOuzKowvifd2czChe3LabGrcIU8naD1b9FUVe4+gzvtyzSy+5AafrHR57rHB+msrHlWsFaEYtumxkC90rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  new SlimSelect({
     select: "#country"
  });
</script>
</body>
</html>

Below is the output of the code above :

3. Using the Selectize plugin

Selectize is a jQuery-based JavaScript library that provides a rich user experience for selecting items from a list. It supports single and multi-value selections, searching, and much more.

Installing Selectize plugin

To add Selectize to your project, all you need is to include the JS and CSS files from cdnjs or jsdelivr on your page.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.min.css" integrity="sha512-wCrId7bUEl7j1H60Jcn4imkkiIYRcoyq5Gcu3bpKAZYBJXHVMmkL4rhtyhelxSFuPMIoQjiVsanrHxcs2euu/w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Don't add the first line if you already have jQuery on your page but ensure it's loaded on the page or else the plugin won't work, being jQuery-based.

If your page uses Bootstrap, select a CSS CDN link that matches your Bootstrap version from cdnjs.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" integrity="sha512-Ars0BmSwpsUJnWMw+KoUKGKunT7+T8NGK0ORRKj+HT8naZzLSIQoOSIIM3oyaJljgLxFi0xImI5oZkAWEFARSA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

In my case, that is Bootstrap 5. You can change 5 to 4, 3, or 2 in the 'href' value above depending on your version.

Initializing Selectize plugin

After loading Selectize JS on your page, you need to initiate the select element in which you want to add a search box. All you need is to target the select element (using its ID, class, or element name) and then call the selectize().

Examples

Selectize: An HTML select element with a search box

<!DOCTYPE html>
<html>
<head>
<title>HTML form with dropdown select</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.min.css" integrity="sha512-wCrId7bUEl7j1H60Jcn4imkkiIYRcoyq5Gcu3bpKAZYBJXHVMmkL4rhtyhelxSFuPMIoQjiVsanrHxcs2euu/w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<style>
    #country {
        height: 35px;
        border: 1px solid #ddd;
        padding-left: 10px;
    }
</style>
</head>
<body>
   <select id="country">  
     <option value="">Select your country</option>
     <option value="US">United States of America</option>
     <option value="KE">Kenya</option>
     <option value="UK">United Kingdom</option>
     <option value="IN">India</option>
     <option value="CN">China</option>
     <option value="CA">Canada</option>
     <option value="RU">Russia</option>
     <option value="DE">Germany</option>
     <option value="ZA">South Africa</option>
     <option value="BR">Brazil</option>
  </select>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
 $(function(){
  $("#country").selectize();
 }); 
</script>
</body>
</html>

The above code will make a searchable dropdown select as below :

Selectize: Bootstrap select element with a search box

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap form with dropdown select</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.bootstrap5.min.css" integrity="sha512-Ars0BmSwpsUJnWMw+KoUKGKunT7+T8NGK0ORRKj+HT8naZzLSIQoOSIIM3oyaJljgLxFi0xImI5oZkAWEFARSA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.form-group {
    width: 500px;
}
</style>
</head>
<body>
  <div class="form-group">
    <select class="form-control" id="country">  
       <option value="">Select your country</option>
       <option value="US">United States of America</option>
       <option value="KE">Kenya</option>
       <option value="UK">United Kingdom</option>
       <option value="IN">India</option>
       <option value="CN">China</option>
       <option value="CA">Canada</option>
       <option value="RU">Russia</option>
       <option value="DE">Germany</option>
       <option value="ZA">South Africa</option>
       <option value="BR">Brazil</option>
    </select>
  </div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
 $(function(){
  $("#country").selectize();
 }); 
</script>
</body>
</html>

The only difference with this from the pure HTML implementation is we have used a Selective CSS file specifically for Bootstrap.

The above code will add a search filter to the select element as below :

3. Using Tom Select Plugin

The Tom Select library is forked from Selectize and then decoupled from jQuery. It allows you to use the features of Selectize.js with only vanilla JS, without having to include jQuery in your project.

Installing tom-select plugin

To install it, you only need to add a CSS and JS file from the CDN (cdnjs and jsdelivr).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/css/tom-select.min.css" integrity="sha512-fnaIKCc5zGOLlOvY3QDkgHHDiDdb4GyMqn99gIRfN6G6NrgPCvZ8tNLMCPYgfHM3i3WeAU6u4Taf8Cuo0Y0IyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/js/tom-select.complete.min.js" integrity="sha512-zdXqksVc9s0d2eoJGdQ2cEhS4mb62qJueasTG4HjCT9J8f9x5gXCQGSdeilD+C7RqvUi1b4DdD5XaGjJZSlP9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Similar to Selectize.js, you can choose the CSS file that matches your Bootstrap version from cdnjs.

Initializing the plugin

Initializing it is very simple, just add the JS line below in your code after you have loaded the Tom Select CSS and JS files.

new TomSelect("selector");

Like in the earlier methods, the selector can be the ID attribute value, the class, or the element name (e.g., "select", "#country", ".students", etc) just like you do in CSS.

You can also pass an optional second argument as an object with settings.

new TomSelect("#country",{
    create: false,
    sortField: {
        field: "text",
        direction: "asc"
    }
});

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML form with dropdown select</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/css/tom-select.min.css" integrity="sha512-fnaIKCc5zGOLlOvY3QDkgHHDiDdb4GyMqn99gIRfN6G6NrgPCvZ8tNLMCPYgfHM3i3WeAU6u4Taf8Cuo0Y0IyQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body>
   <select id="country">  
     <option value="">Select your country</option>
     <option value="US">United States of America</option>
     <option value="KE">Kenya</option>
     <option value="UK">United Kingdom</option>
     <option value="IN">India</option>
     <option value="CN">China</option>
     <option value="CA">Canada</option>
     <option value="RU">Russia</option>
     <option value="DE">Germany</option>
     <option value="ZA">South Africa</option>
     <option value="BR">Brazil</option>
  </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.3.1/js/tom-select.complete.min.js" integrity="sha512-zdXqksVc9s0d2eoJGdQ2cEhS4mb62qJueasTG4HjCT9J8f9x5gXCQGSdeilD+C7RqvUi1b4DdD5XaGjJZSlP9Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
   new TomSelect("#country");
</script>
</body>
</html>

Below is how the searchable dropdown select will look with Tom Select plugin :

Conclusion

Adding a search box within an HTML select element significantly improves user experience, particularly when dealing with long lists of options, making it easy for users to find their desired options.

In this article, we have comprehensively covered how to add a search box in select elements for both pure HTML and the Bootstrap framework.

Choose the approach that best suits your project's needs, and enhance the efficiency and convenience of your web forms.

I hope that you have enjoyed this tutorial and found it helpful. Have a great coding time!

How to make an HTML select dropdown with a search box

Creating an HTML dropdown select

HTML form with dropdown select

Bootstrap form with dropdown select

Adding a search box to HTML select dropdown

1. Using Select2 plugin

1. Loading Select2 from a CDN

2. Self-hosting Select2 in your project

Initializing Select2 in your form dropdown select

Examples

HTML form with dropdown select and search box

Bootstrap form with dropdown select and search box

2. Using the Slim Select plugin

Installing Slim Select

Initializing Slim Select

Examples

Creating HTML select with a search using Slim Select

Creating a Bootstrap dropdown select with a search option using Slim Select

3. Using the Selectize plugin

Installing Selectize plugin

Initializing Selectize plugin

Examples

Selectize: An HTML select element with a search box

Selectize: Bootstrap select element with a search box

3. Using Tom Select Plugin

Installing tom-select plugin

Initializing the plugin

Example

Conclusion

Quick Links

Categories

Subscribe

How to make an HTML select dropdown with a search box

Creating an HTML dropdown select

HTML form with dropdown select

Bootstrap form with dropdown select

Adding a search box to HTML select dropdown

1. Using Select2 plugin

1. Loading Select2 from a CDN

2. Self-hosting Select2 in your project

Initializing Select2 in your form dropdown select

Examples

HTML form with dropdown select and search box

Bootstrap form with dropdown select and search box

2. Using the Slim Select plugin

Installing Slim Select

Initializing Slim Select

Examples

Creating HTML select with a search using Slim Select

Creating a Bootstrap dropdown select with a search option using Slim Select

3. Using the Selectize plugin

Installing Selectize plugin

Initializing Selectize plugin

Examples

Selectize: An HTML select element with a search box

Selectize: Bootstrap select element with a search box

3. Using Tom Select Plugin

Installing tom-select plugin

Initializing the plugin

Example

Conclusion

You May Also Like:

Quick Links

Categories

Subscribe