How to add dropdown search bar in Bootstrap?

Last Updated : 02 May, 2024

A dropdown search bar in Bootstrap combines a text input field with a dropdown menu, providing users with options to select from while allowing them to input custom search queries. It enhances user experience by offering both flexibility and convenience.

Preview of final output: Let us have a look at how the final output will look like.

Preview Image of Dropdown Menu with Search Bar

Prerequisites:

Approach:

Utilizes HTML, JavaScript, and Bootstrap 5.
Creates an interactive web-based dropdown menu with a search bar.
Utilizes the JavaScript function handleInput to respond to user input in the search bar.
Filters and sorts a predefined list of items based on user input.
Dynamically updates the dropdown menu to display matching results.
Displays a “No Item” message if there are no matches.
Leverages Bootstrap for styling.
Provides an interactive and user-friendly experience for searching and selecting items from the list on the webpage.

Example: This example describes the basic implementation of the dropdown with search bar using HTML, Javascript and Bootstrap 5.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        Document
    </title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="dropdown m-4">
        <button class="btn btn-secondary 
                       dropdown-toggle" 
                type="button" 
                id="dropdownMenuButton1" 
                data-bs-toggle="dropdown" 
                aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu pt-0" 
            aria-labelledby="dropdownMenuButton1">
            <input type="text" 
                   class="form-control 
                          border-0 border-bottom 
                          shadow-none mb-2" 
                   placeholder="Search..." 
                   oninput="handleInput()">
        </ul>
    </div>
    <script src="./script.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">

    </script>
</body>

</html>

Javascript

const handleInput = () => {
    const inputValue =
        document
            .querySelector('.form-control').value;
    const results =
        ["apple", "banana", "cherry",
            "date", "elderberry"];
    const parentElement =
        document
            .querySelector(".dropdown-menu");
    const elementsToRemove =
        document.querySelectorAll("li");
    elementsToRemove.forEach(element => {
        element.remove();
    });
    if (inputValue) {
        const matchingWords =
            results
                .filter(word => word
                    .includes(inputValue));
        matchingWords.sort((a, b) => {
            const indexA =
                a.indexOf(inputValue);
            const indexB =
                b.indexOf(inputValue);
            return indexA - indexB;
        });
        matchingWords.forEach(word => {
            const listItem =
                document.createElement("li");
            const link =
                document.createElement("a");
            link.classList.add("dropdown-item");
            link.href = "#";
            link.textContent = word;
            listItem.appendChild(link);
            parentElement.appendChild(listItem);
        });
        if (matchingWords.length == 0) {
            const listItem =
                document.createElement('li');
            listItem.textContent = "No Item";
            listItem.classList.add('dropdown-item');
            parentElement.appendChild(listItem);
        }
    } else {
        results.forEach(word => {
            const listItem =
                document.createElement("li");
            const link =
                document.createElement("a");
            link.classList.add("dropdown-item");
            link.href = "#";
            link.textContent = word;
            listItem.appendChild(link);
            parentElement.appendChild(listItem);
        });
    }
}
handleInput();