content logo

Bootstrap Search Boxes:

Search Field with Filter in Bootstrap

The search bar is one of those important aspects of the site that is easily neglected during the process of designing different elements of the website. The search bar is really important in the sense that it affects the user experience by a huge amount. All in all, search bars are great features and they help your visitors find the content they are looking for faster. Before, web designers only thought about the basic functionality of a search feature but now, it has gone far over a simple search tool. People use different little features to make their search bars more advanced and special. One of such features that helps with digging deeper and searching more efficiently is adding a filter.

The Bootstrap search box we are displaying in this post features a simple search box with filter options. Filters make the search field more limited which results in faster searches. A Bootstrap filter search box is a great way to ensure your users are satisfied with the website’s speed. If you want to use this search box with filter for your own website, just head on down to the code section. The codes are absolutely free of charge and you don’t have to pay anything.

#

Bootstrap Search Box

#

Search Box with Filters

#

Bootstrap Filter Search Bar

#

Simple Search Box


<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="input-group">
                <div class="input-group-btn search-panel">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="search_concept">Filter by</span> <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#contains">Contains</a></li>
                        <li><a href="#its_equal">It's equal</a></li>
                        <li><a href="#greather_than">Greather than</a></li>
                        <li><a href="#less_than">Less than</a></li>
                        <li class="divider"></li>
                        <li><a href="#all">Anything</a></li>
                    </ul>
                </div>
                <input type="hidden" name="search_param" value="all" id="search_param" />
                <input type="text" class="form-control" name="x" placeholder="Search term..." />
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body{
    margin-top:20px;
}
$(document).ready(function (e) {
    $(".search-panel .dropdown-menu")
        .find("a")
        .click(function (e) {
            e.preventDefault();
            var param = $(this).attr("href").replace("#", "");
            var concept = $(this).text();
            $(".search-panel span#search_concept").text(concept);
            $(".input-group #search_param").val(param);
        });
});
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style>
body{
    margin-top:20px;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="input-group">
                <div class="input-group-btn search-panel">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="search_concept">Filter by</span> <span class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#contains">Contains</a></li>
                        <li><a href="#its_equal">It's equal</a></li>
                        <li><a href="#greather_than">Greather than</a></li>
                        <li><a href="#less_than">Less than</a></li>
                        <li class="divider"></li>
                        <li><a href="#all">Anything</a></li>
                    </ul>
                </div>
                <input type="hidden" name="search_param" value="all" id="search_param" />
                <input type="text" class="form-control" name="x" placeholder="Search term..." />
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function (e) {
    $(".search-panel .dropdown-menu")
        .find("a")
        .click(function (e) {
            e.preventDefault();
            var param = $(this).attr("href").replace("#", "");
            var concept = $(this).text();
            $(".search-panel span#search_concept").text(concept);
            $(".input-group #search_param").val(param);
        });
});
</script>

</body>
</html>
Preview