javascript - Search into divs -


i found post how perform real time search , filter on html table , adapt search in divs.

html :

<input type="text" id="search" placeholder="type search">   <table id="table">     <tr>         <div class="panel panel-default">             <!-- default panel contents -->             <div class="panel-heading">panel 1</div>             <div class="panel-body">                 <p>1</p>             </div>         </div>     </tr>     <tr>         <div class="panel panel-default">             <!-- default panel contents -->             <div class="panel-heading">panel 2</div>             <div class="panel-body">                 <p>2</p>             </div>         </div>     </tr> </table> 

js:

var $rows = $('#table tr'); $('#search').keyup(function() {   var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',     reg = regexp(val, 'i'),     text;    $rows     .show()     .filter(function() {       text = $(this).text().replace(/\s+/g, ' ');       return !reg.test(text);     })     .hide(); }); 

can explains how access content div (and here, in "panel-heading") ?

your html invalid. tr element can have td or th children. should wrap tr contents td elements.

this how chromium browser renders html:

<input type="text" id="search" placeholder="type search"> <div class="panel panel-default">     <!-- default panel contents -->     <div class="panel-heading">panel 1</div>     <div class="panel-body">         <p>1</p>     </div> </div> <div class="panel panel-default">     <!-- default panel contents -->     <div class="panel-heading">panel 2</div>     <div class="panel-body">         <p>2</p>     </div> </div> <table id="table">     <tbody>         <tr></tr>         <tr></tr>     </tbody> </table> 

fix markup , javascript snippet work.


Comments

Popular posts from this blog

python - Mongodb How to add addtional information when aggregating? -

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

java - Incorrect order of records in M-M relationship in hibernate -