<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=" well col-xs-6 col-md-3"> RM234567</br> <b>Permata Sari</b></br> 29 tahun / 23 Jan 1986 <hr> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span> Dashboard</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-file" aria-hidden="true"></span> Rekam Medis</a></li> <li role="presentation" class="active"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Terapi</a></li> <li role="presentation"><a href="#"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hasil Radiologi</a></li> </ul> </div> <div class=" col-xs-12 col-sm-6 col-md-9"> <h3><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Diagnosis</h3> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-md-3"> <h4>Daftar kode ICD-10</h4> </div> <div class="col-md-7 pull-right"> <div class="input-group"> <input type="search" id="search" class="form-control" placeholder="Cari..."> <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> </div> </div> <div style="height: 200px; overflow: auto"> <table class="table" id="table" > <thead> <tr> <th>Kode</th> <th>Deskripsi diagnosis</th> <th></th> </tr> </thead> <tbody> <tr> <td>E70.8</td> <td>Other disorders of aromatic amino-acid metabolism</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>I15.0</td> <td>Renovascular hypertension</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>I30.0</td> <td>Acute nonspecific idiopathic pericarditis</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>I42.0</td> <td>Dilated cardiomyopathy</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>I77.2</td> <td>Rupture of artery</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>J18.2</td> <td>Hypostatic pneumonia, unspecified</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> <tr> <td>K71.4</td> <td>Toxic liver disease with chronic lobular hepatitis</td> <td><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></td> </tr> </tbody> </table> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4>Hasil Diagnosis</h4> </div> <table class="table" width="100%"> <thead> <tr> <th width="18%">Tanggal - Jam</th> <th>Kode ICD-10</th> <th>Deskripsi diagnosis</th> </tr> </thead> <tbody> <tr> <td>23/Feb/15 - 11:05</td> <td>I77.2</td> <td>Rupture of artery</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }

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