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
Post a Comment