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

Leave a Reply

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