聚合物元素中的过滤表行

Question

我的聚合物元素中有一个表格，我希望它根据输入字段中提供的关键字过滤行

<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>

没有收到任何控制台错误但过滤器不起作用

我是聚合物新手，所以请告诉我我做错了什么？

Answer 1

 <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}} 在您的笔记列表元素中创建一个属性，该属性绑定到纸张输入的输入值，我们可以使用 this.valHeader 访问它

Answer 2

方法querySelector 仅返回第一个元素，在您的情况下是<thead> 中的<tr>。您需要改用querySelectorAll 并在<tbody> 中仅选择<tr>。

替换：

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

与：

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

另外，$(this).val() 似乎不是访问<paper-input> 值的正确方法。您需要将<paper-input> 更改为：

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

然后您将能够在您的代码中以this.searchVal 而不是$(this).val() 的形式访问其值。