Filter table row in polymer element

Question

I am having a table in my polymer element and i want it filters the row according to the keywords provided in the input field

<polymer-element name="my-element">
<template>
<paper-input label="Search" floatingLabel="false" class="search-main" on-keyup="{{search}}"></paper-input>
<table id="table">
     <thead>
        <tr>
            <th>First Name</th>
            <th>Middle Name</th>
            <th>Last Name</th>
        </tr>
     </thead>
     <tbody>
         <tr>
            <td>John</td>
            <td>Cr</td>
            <td>Smith</td>
        </tr>
        <tr>
            <td>keety</td>
            <td>cros</td>
            <td>bran</td>
        </tr>
     </tbody>
</table>
</template>
<script>
    Polymer('my-element', {
        search: function() {
            var rows = this.$.table.querySelector('tr');
            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();                  
       }
    })
    ;
</script>
</polymer-element>

not getting any console error but filter is not working

I'm new to polymer, so please tell what am i doing wrong?

Answer 1

Method querySelector returns only the first element, which in your case is <tr> in <thead>. You need to use querySelectorAll instead and select only <tr> in <tbody>.

Replace:

var rows = this.$.table.querySelector('tr');

with:

var rows = this.$.table.querySelectorAll('tbody tr');

Also it doesn't seem that $(this).val() is the correct way to access value of <paper-input>. You need to change your <paper-input> to:

<paper-input label="Search" floatingLabel="false" value="{{searchVal}}" class="search-main" on-keyup="{{search}}"></paper-input>

Then you will be able to access its value as this.searchVal instead of $(this).val() in your code.

Answer 2

 <polymer-element name="my-element">
 <template>
 <paper-input label="Search" floatingLabel="false" value="{{valHeader}}"    class="search-main" on-keyup="{{search}}"></paper-input>
 <table id="table">
 <thead>
    <tr>
        <th>First Name</th>
        <th>Middle Name</th>
        <th>Last Name</th>
    </tr>
 </thead>
 <tbody>
     <tr>
        <td>John</td>
        <td>Cr</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>keety</td>
        <td>cros</td>
        <td>bran</td>
    </tr>
 </tbody>
 </table>
 </template>
 <script>
Polymer('my-element', {
  search: function() {
            var rows = this.$.table.querySelectorAll('tbody tr');
            var val = '^(?=.*\\b' + $.trim(this.valHeader).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();                  
       }
})
;
</script>
</polymer-element>

{{valHeader}} creates a property inside your note-list elelemt which is bound to the input value of the paper-input and we can access it using this.valHeader