<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" > <div class="col-lg-12"> <div class="page-header"> <h2>Inventory Administrator</h2> </div> <div style="text-align:right"> <h4 style="padding-right:15em">Other Actions: </h4> <button type="button" class="btn btn-default btn-custom" > Add New Item</button> <button type="button" class="btn btn-default btn-custom" > Modify Stock Quantity</button> </div> </div> </div> <div class="row" style="background-color: #eeeeee;"> <div class="col-lg-12"> <h3>In-Stock Inventory</h3> </div> </div> <div class="row" style="background-color: #eeeeee;"> <div class="col-lg-4 col-lg-offset-4"> <div class="inner-addon left-addon"> <i class="glyphicon glyphicon-search"></i> <input type="text" class="form-control" placeholder="Search all inventory…" /> </div> </div> <div class="row"> <div class="col-lg-12"> <table class="table" id="table"> <thead> <tr> <th>SKU Lookup #</th> <th>Item Name</th> <th>Quantity: In Stock/Ordered</th> <th>Category</th> <th>Price (USD)</th> </tr> </thead> <tbody> <tr> <td>9826-231</td> <td>Origin8 Carbon Road Fork</td> <td>2 / 0</td> <td>Fork/Performance/Part</td> <td>174.99</td> </tr> <tr> <td>6178-872</td> <td>Continental Presta Valve 700c</td> <td>5 / 15</td> <td>Tube/Tire/Part</td> <td>8.99</td> </tr> <tr> <td>5173-612</td> <td>Trek CrossRip 2</td> <td>1 / 0</td> <td>Complete Bike/Trek/Commuter</td> <td>1579.99</td> </tr> </tbody> </table> <hr> <div style="text-align:center"> <a href="http://github.com/stidges/jquery-searchable" target="_blank">Load More Items</a> </div> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Out of Stock Items</h3> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <div class="inner-addon left-addon"> <i class="glyphicon glyphicon-search"></i> <input type="text" class="form-control" placeholder="Search out of stock…" /> </div> </div> </div> </div> <div class="container" id="searchable-container"> <div class="row row-padding"> <div class="col-xs-4">Col 1</div> <div class="col-xs-4">Col 2</div> <div class="col-xs-4">Col 3</div> </div> <div class="row row-padding"> <div class="col-xs-4">Another row</div> <div class="col-xs-4">With some</div> <div class="col-xs-4">Other data</div> </div> <div class="row row-padding"> <div class="col-xs-4">Lorem</div> <div class="col-xs-4">Ipsum</div> <div class="col-xs-4">Dolor</div> </div> <div class="row row-padding"> <div class="col-xs-4">Foo</div> <div class="col-xs-4">Bar</div> <div class="col-xs-4">Baz</div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

.row-padding { margin-top: 25px; margin-bottom: 25px; } /* body { background: #eeeeee !important; } */ /* enable absolute positioning */ .inner-addon { position: relative; } /* style glyph */ .inner-addon .glyphicon { position: absolute; padding: 10px; pointer-events: none; } /* align glyph */ .left-addon .glyphicon { left: 0px;} .right-addon .glyphicon { right: 0px;} /* add padding */ .left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; } .btn-custom { color: #428bca; }

$(function () { $( '#table' ).searchable({ striped: true, oddRow: { 'background-color': '#f5f5f5' }, evenRow: { 'background-color': '#fff' }, searchType: 'fuzzy' }); $( '#searchable-container' ).searchable({ searchField: '#container-search', selector: '.row', childSelector: '.col-xs-4', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });