通过字符串匹配过滤核心列表元素

Question

简单过滤器，隐藏core-list中与输入的字符串不匹配的任何项目。过滤后的元素将具有“隐藏”属性，因此它们不应占用任何空间......显然存在错误，可能core-list与它有关。此外，当应用过滤器并向下滚动时，再向上显示所有元素：/任何想法如何使此过滤器与core-list一起使用？对于此示例，我使过滤器与每个列表项的名称相匹配。

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-list/core-list.html">

<my-element></my-element>

<polymer-element name="my-element" attributes="">
  <template>
    <style>
      :host {
        display: block;
      }
      :host core-list {
        margin: 8px 0;
        height: 400px;
        width: 350px;
      }
      :host core-list div {
        border: 1px solid #008000;
      }
    </style>

    <label for="s">Search:</label>
    <input id="s" value="{{ filtervalue }}">

    <core-list id="list" data="{{ arr }}" height="50">
      <template>
        <div hidden?="{{ filtervalue | filter(model) }}">
          Name: {{ model.name }}, Index: {{ index }}, Selected: {{ selected }}
        </div>
      </template>
    </core-list>
  </template>

  <script>
    (function() {
      function genData() {
        var arr = [];
        for (var i = 0; i < 1000; i++) {
          arr.push({
            name: "sample" + i,
            pos: i
          });
        }
        return arr;
      }

      Polymer('my-element', {
        created: function() {
          this.arr = genData();
        },
        ready: function() {},
        filter: function(v, model) {
          if (!v) return false;

          if (model) {
            console.log("v: %o\n%o", v, model.name);
            return model.name.indexOf(v) < 0;
          }
        }
      });
    })();
  </script>
</polymer-element>

Answer 1

这是一个答案：

以下是一些可以提供帮助的过滤器：polymer-filters/filter-startsWith.js

过滤器来自Polymer expressions examples。