Search into divs

Question

I found this post How to perform a real time search and filter on a HTML table and I would like to adapt it to search in divs.

Html :

<input type="text" id="search" placeholder="Type to 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 someone explains how to access content into my div (and here, in "panel-heading") ?

score 0 · Accepted Answer · answered Apr 28 '15 at 19:54

0

Your html is invalid. tr element can only have td or th children. You should wrap the tr contents with td elements.

This is how my Chromium browser renders your html:

<input type="text" id="search" placeholder="Type to 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 the markup and the JavaScript snippet will work.

answered Apr 28 '15 at 19:54

Ram

143,282
16
168
197

I added to my panels but nothing changed, i guess i don't access the "panel-heading" content right ? – Apr 28 '15 at 19:58
1

Check this fiddle. http://jsfiddle.net/rh9jgwjo/ The `text` method in your code returns text content of all the `td` children. If you just want to get the text content of the `.panel-heading` element code: `$('.panel-heading', this).text()` – Ram Apr 28 '15 at 20:00
You are welcome. Yes, because there is no difference. I just wrap the `tr` contents with `td` elements. – Ram Apr 28 '15 at 20:07

Search into divs

1 Answers1