How to add dropdown search bar in Bootstrap 5 ?

Last Updated : 17 Nov, 2023

In this article, we will see a simple Bootstrap webpage dropdown button with a search functionality.

Bootstrap webpage with a search-enabled dropdown button. JavaScript dynamically updates the menu with fruit suggestions sorted by relevance. Displays “No Item” if no matches.

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.

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();

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>