<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-6"> <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Tambah pasien </button> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="search" id="search" class="form-control" placeholder="Cari pasien..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </br> <div style="height: 800px; overflow: auto"> <table class="table" id="table" > <thead> <tr> <th>Nr. Rekam Medis</th> <th>Tanggal Masuk</th> <th>Nama Pasien</th> <th>Jenis Kelamin</th> <th>Umur / Tanggal Lahir</th> <th>Diagnosis</th> <th>Status</th> <th></th> </tr> </thead> <tbody> <tr> <td><a href="#">RM234567</a></td> <td>23 Jan 2015</td> <td>Agus Gunawan</td> <td>Laki-laki</td> <td>64 tahun / 08 Feb 1976</td> <td>I15.0 Renovascular hypertension</td> <td>Rawat inap</td> <td><a href=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td> </tr> <tr> <td><a href="#">RM234542</a></td> <td>18 Des 2014</td> <td>Bunga Lestari</td> <td>Perempuan</td> <td>29 tahun / 30 Jul 1980</td> <td>D50.9 Iron deficiency anemia, unspecified</td> <td>Pasien pulang</td> <td><a href=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td> </tr> </tbody> </table> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

$(function () { $( '#table' ).searchable({ striped: true, 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 ); } }) });