seed-element.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-list/iron-list.html">
<!--<link rel="import" href="child-element.html">-->

<dom-module id="seed-element">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
      }

      iron-list {
        height: 100px;
        width: 100px;
      }

      .child {
        display: block;
      }

    </style>

    <div>
      <input value="{{search::input}}" type="search" placeholder="search for world">
    </div>

    <iron-list items="[[matching]]">
      <template>
        <div class="child">
          <span>[[item]]</span>
        </div>
        <!--<child-element record="[[item]]"></child-element>-->
      </template>
    </iron-list>

  </template>

  <script>
    Polymer({
      is: 'seed-element',

      properties: {

        records: {
          type: Array,
          value: function(){
            return [
              "hello",
              "world"
            ]
          }
        },

        matching: [],

        search: ""

      },

      observers: [
        'filter(search)'
      ],

      ready: function() {
        this.matching = this.records;
      },

      filter: function(search){
        search = search || this.search;

        this.matching = [];

        this.records.forEach(function(record){
          if(search == "" || record.indexOf(search) > -1){
            this.matching.push(record);
          }
        }.bind(this));
      }

    });
  </script>
</dom-module>