How to add search bar in select dropdown

In this article , I have explained you how you can Make a Dropdown with Search Box using jQuery.

Here, I have used chosen jQuery plugin , which help us to achieve this functionality with just one single line.

Below is the code which you can copy and paste in your favorite code editor.

Run the code and check in your browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://code.jquery.com/jquery-3.6.0.js"
      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"
      integrity="sha512-eSeh0V+8U3qoxFnK3KgBsM69hrMOGMBy3CNxq/T4BArsSQJfKVsKb5joMqIPrNMjRQSTl4xG8oJRpgU2o9I7HQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"
      integrity="sha512-0nkKORjFgcyxv3HbE4rzFUlENUMNqic/EzDIeYCgsKa/nwqr2B91Vu/tNAu4Q0cBuG4Xe/D1f/freEci/7GDRA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>Document</title>
  </head>
  <body>
    <h1>Subscribe to What About Coding</h1>
    <select data-placeholder="Choose a name..." class="ch">
      <option></option>
      <option>Milli</option>
      <option>Jhon</option>
      <option>Harry</option>
      <option>Jessica</option>
    </select>

    <script>
      $(document).ready(function () {
        $(".ch").chosen({
          width: "95%",
          no_results_text: "Oops, nothing found!",
          allow_single_deselect: true,
        });
      });
    </script>
  </body>
</html>

If it worked , leave a like and share it with your friends.

Help Others

Himanshu Shekhar

Hey. I am a software engineer with 3+ years. Along with my job, I create content regarding coding and software engineering in general. I would request you to follow my blog and my video, which will help you in your software engineering journey. Follow me on Youtube →
View All Articles

Leave a Reply

Your email address will not be published.