<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>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="search1"><label class="tree-toggler nav-header">Специальность 1 </label> <ul class="nav list-group tree"> <div class="search">Физика</div> <div class="search">Геометрия</div> <div class="search">физкультура</div> </ul> </div> <div class="search1"><label class="tree-toggler nav-header">Специальность 1 </label> <ul class="nav list-group tree"> <div class="search">Математика</div> <div class="search">Информатика</div> <div class="search">Что то</div> </ul> </div> <div class="search1 row-padding"> <div class="search">Lorem</div> <div class="search">Ipsum</div> <div class="search">Dolor</div> </div> <div class="row row-padding"> <div class="search">Foo</div> <div class="search">Bar</div> <div class="search">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: '.search1', childSelector: '.search', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });