Bootstrap 4 Search Box With Dropdown List

Today, We want to share with you bootstrap filter dropdown.In this post we will show you bootstrap select dropdown with search box, hear for Bootstrap 4 search box with a dropdown list is easy to create by using bootstrap framework predefined class and JS attributes and i have also created bootstrap 4 search box with bootstrap. we will give you demo and example for implement.In this post, we will learn about How to filter a html table using simple javascript? with an example.

Easy jQuery Input Filter For Bootstrap Dropdown List

Example 1: Add HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How To create Bootstrap 4 Search Box With Dropdown List - www.pakainfo.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
    <div class="search-box col-md-5">               
        <form action="">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select All</button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Tamil Rokers</a>
                      <a class="dropdown-item" href="#">Tamil Hindi</a>
                      <a class="dropdown-item" href="#">Tamil English</a>
                      <div role="separator" class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Others Tamil</a>
                    </div>
                </div>
                <input type="text" class="form-control" aria-label="Search input with dropdown button">
                <div class="input-group-append">
                    <button class="btn btn-success" type="button">Search</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Add CSS CODE

<style>
/*---- Custom CSS ----*/
.search-box {
    margin: 100px auto;
}
.search-box .btn-light {
    border: 1px solid #ced4da;
}
</style>

I hope you get an idea about bootstrap filter panel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.