<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <h1>jQuery Searchable Plugin</h1> </div> <p>You can find the source of this plugin at <a href="http://github.com/stidges/jquery-searchable" target="_blank">Github</a> (http://github.com/stidges/jquery-searchable)!</p> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Table / Fuzzy search example</h3> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <input type="search" id="search" value="" class="form-control" placeholder="Search agreements for ООО Эктивейт"> </div> </div> <div class="row"> <div class="col-lg-12"> <table class="table" id="table"> <thead> <tr> <th>Agreement №</th> <th>Appendix №</th> <th>Agreement Date</th> <th>Agreement comment</th> </tr> </thead> <tbody> <tr> <td>01/12-11</td> <td>77</td> <td>05.05.2015</td> <td>Мониторинг согласованного ассортимента фото и печатающей техники, ПОС материалов в магазинах партнеров во 2 квартале 2015г.</td> </tr> <tr> <td>01/12-11</td> <td>76</td> <td>10.04.2015</td> <td>Распространение рекламных материалов Canon. Часть 2 квартальной адресной программы</td> </tr> <tr> <td>01/12-11</td> <td>75</td> <td>10.04.2015</td> <td>Распространение рекламных материалов Canon. Часть 1 квартальной адресной программы</td> </tr> <tr> <td>01/12-11</td> <td>1</td> <td>31.03.2015</td> <td>Изменение Адресной Программы мониторинга по НКП фото и Партнерским программам по струйным и лазерным принтерам</td> </tr> <tr> <td>01/08-2013</td> <td>18</td> <td>01.03.2015</td> <td>Дополнительные PO 6145; 6146; 6062. Проведение рекламной акции lasepromo по лазерным расходным материалам.</td> </tr> <tr> <td>01/08-2013</td> <td>18</td> <td>01.03.2015</td> <td>Laser promo (march 2015-april 2016) / Проведение рекламной акции по лазерной расходке. Сумма в договоре предварительная, поэтому PO нет.</td> </tr> <tr> <td>01/08-2013</td> <td>19</td> <td>01.03.2015</td> <td>Рекламная акция laserpromo (лазерная расходка) - март.</td> </tr> <tr> <td>01/08-2013</td> <td>17-1</td> <td>27.02.2015</td> <td>Доп согл №1 к прил 17. Изменение стоимости услуг по пром-программе лазерной расходки (фев.)</td> </tr> <tr> <td>01/12-11</td> <td>74</td> <td>01.02.2015</td> <td>Мониторинг согласованного ассортимента, POSM и Touch& Try зон по фото и печатающий технике за 1 квартал 2015 г</td> </tr> <tr> <td>01/08-2013</td> <td>16</td> <td>31.01.2015</td> <td>Внесение изменений в приложение №16: изменени стоимости оказываемых услуг по акции laserpromo,</td> </tr> </tbody> </table> <hr> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Non-table example</h3> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <input type="search" id="container-search" value="" class="form-control" placeholder="Search..."> </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; }

$(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 ); } }) });