Bootstrap Search Form Example with Dropdown

This bootstrap tutorial will show you how to create bootstrap search form with dropdown. Without any doubt, search form is a much required component of well-structured websites. If you are into bootstrap then consider yourself fortunate as it provides all sorts of necessary components to build search forms right from basic search to advanced search panels.

All you want to know is how to use the right elements to create the search form you prefer. Here we'll see about creating a search form with dropdown in bootstrap.

Bootstrap Search Form with Dropdown Example:

Basically bootstrap search form comes with a standard textbox and a submit button but with little effort you can create a search box with icon in bootstrap.

Along with that I want to add a dropdown element to the search box and make the search icon to fit inside the box rather having it separately. For that it requires little css tweaking and a js script to work.

Here is the html markup for the bootstrap search form with dropdown I intended to build.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8"> 
    <title>Bootstrap Search Form with Dropdown Example</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body{
        margin-top:40px;
    }
        
    #txt-search {
        border-radius: 0 4px 4px 0;
    }
    
    #btn-search {
        padding: 4px 5px 2px;
        left: -28px;
        position: relative;
        border: 0;
        background: none;
        z-index: 2;
    }
    </style>
</head>

<body>
<!-- search form -->
<div class="container">
<div class="row">    
<div class="col-xs-8 col-xs-offset-2">
    <form role="search">
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span id="srch-category">Category</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="mnu-category">
                <li><a href="#Apps">Apps</a></li>
                <li><a href="#eBooks">eBooks</a></li>
                <li><a href="#Games">Games</a></li>
                <li><a href="#Music">Music</a></li>
                <li><a href="#Videos">Videos</a></li>
            </ul>
        </div>
        <input type="hidden" id="txt-category">
        <input type="text" id="txt-search" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
            <button id="btn-search" type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </span>
    </div>
    </form>
</div>
</div>
</div>

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>
$(document).ready(function(e){
    $('#mnu-category').find('a').click(function(e) {
        e.preventDefault();
        var cat = $(this).text();
        $('#srch-category').text(cat);
        $('#txt-category').val(cat);
    });
});
</script>

</body>
</html>

As you can see, we have wrapped the entire form elements inside the input-group class which strips-off any padding between elements and set border-radius to 0. This will be useful in our case where we attach extra dropdown and a submit button before and after the search textbox.

The above markup produces a search form with dropdown like this,

bootstrap-search-form-example-with-dropdown

You can use this exact script to add search form to top navbar, right or left side navigation of the webpage as per your requirement. If you prefer, you can also move the css to a separate stylesheet.

Note: Bootstrap 4 has removed the support for glyphicons. If you want to try out this example with Bootstrap 4 then go with other good alternatives like fontawesome to add icons.

Likewise you can easily create a search form with dropdown feature. I hope you find this bootstrap search form example useful. Meet you in another interesting post :)

Bootstrap Search Form Example with Dropdown

Bootstrap Search Form with Dropdown Example:

4 comments: