Bootstrap 3 Search

by Avinashullal

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://msurguy.github.io/ladda-bootstrap/dist/spin.min.js"></script>
<script src="http://msurguy.github.io/ladda-bootstrap/dist/ladda.min.js"></script>
<div class="container-fluid">
    <div class="well col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
        <form class="form-inline" action="#" method="post">
            <div class="input-group col-lg-8 col-md-8 col-sm-8 pull-left col-xs-8">
                <input id="word" class="form-control" type="text" value="" placeholder="Search" name="q" autofocus="autofocus" />
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" id="x" data-toggle="dropdown">Select category<span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">1</a>

                        </li>
                        <li><a href="#">Something else</a>

                        </li>
                        <li><a href="#">3</a>

                        </li>
                    </ul>
                </div>
                <!-- /btn-group -->
            </div>
            <button id="search" data-style="slide-left" class="btn btn-success col-lg-3 col-md-3 col-sm-3 col-xs-3 pull-right" type="submit"> <i id="icon" class="fa fa-search"></i>Search</button>
        </form>
    </div>
    <div id="results" class="well col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
        <table id="results" class="table table-hover table-striped table-condensed">
            <thead>
                <tr>
                    <th></th>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
             ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url('http://msurguy.github.io/ladda-bootstrap/dist/ladda-themeless.min.css');
 @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
 #x {
    min-width: 150px;
}
.table-hover > tbody > tr > td, .table-hover > tbody > tr > th {
    vertical-align: middle;
}
table > tbody > tr > td:first-child {
    text-align:center;
}
.well>table {
    margin-bottom: 0px;
}
body {
    margin-top: 50px;
    background: url('http://radmin.squareturtle.com/img/retina_wood.png') repeat;
    font-size: 13px;
}
.well {
    background-color: white;
    border-color: #AFACAC;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1);
}
#results {
    padding: 10px 0 0 0;
}

JavaScript

$('.dropdown-menu li').click(function (e) {
    e.preventDefault();
    $(this).closest('.input-group-btn').find('button').html($(this).text() + '<span class="caret"></span>');
});

$("#search").on('click', function (e) {
    e.preventDefault();
    var name = $("#word").val();
    if (name === "") name = "Default";

    $("#results tbody").children().remove();
    $(this).addClass("disabled").html('<i class="fa fa-spin fa-circle-o-notch"></i>');
    //$("#icon").removeClass("fa-search").addClass("fa-spin fa-circle-o-notch");
    setTimeout(

    function () {
        var newBody = "";
        for (var i = 1; i <= 6; i++) {
            newBody += "<tr><td><img width='40px' height='40px' src='http://static.bleacherreport.net/images/redesign/avatars/default-user-icon-comment.png'/></td><td>" + i + "</td><td>"+name+"</td><td>Rambo</td><td>[email protected]</td></tr>";
        }
        $("#results tbody").append(newBody);
        $("#search").removeClass("disabled").html('<i class="fa fa-search"></i>Search');
        //$("#icon").removeClass("fa-spin fa-circle-o-notch").addClass("fa-search");
        $('#word').focus();
    }, 2000);

});