CODEWITHSUNDEEP
polymercustom-componentpolymer-2.xcustom-element
Un1
Un1

Reputation: 4132

Polymer 2.x - how to make this search-filter work?

I want to implement a search-filter for elements in a Polymer 2.x web app.
I have this code from Polymer 1.x down below and I'm not sure how to make it work in Polymer 2.x

How do I make the code from Polymer 1.x below, to work on this Polymer 2.x page:

my-home.html | script area

  <script>
    class Myhome extends Polymer.Element {
      static get is() { return 'my-home'; }
    }

    window.customElements.define(Myhome.is, Myhome);
  </script>

The search filter code from Polymer 1.x:

html

 <div class="app-grid" style="display: flex;">
    <template items="[[data]]">
      <div class="item horizontal wrap layout" style="width: 300px; height: 300px; margin: 2%;">
        <paper-card heading="[[item.title]]" image="http://lorempixel.com/300/200">
           <div class="card-content">[[item.description]]</div>
           <div class="card-actions">
             <paper-button>Button</paper-button>
           </div>
        </paper-card>
      </div>
    </template>
  </div>

script

<script>
    Polymer({
      is: 'my-home',
      properties:{
          defaultData:{
            type:Array,
            value:[{title:'Color picture',description:'An RGB picture'},
              {title:'Grey image',description:'That\'s a grey picture'},
              {title:'3',description:'this is content 3'}]
          },
          data:{
            type:Array
          }
        },
        ready:function(){
          this.data = this.defaultData;
          this.$.search.addEventListener('keyup',this.searchChanged.bind(this));
        },
        searchChanged:function(e){
          var querySearch = this.$.search.value.toLowerCase();
          if(querySearch == ''){
            this.data = this.defaultData;
          }else{
            this.data = this.defaultData.filter(function(item){
              return item.title.toLowerCase().indexOf(querySearch) !== -1 || item.description.toLowerCase().indexOf(querySearch)  !== -1;
            });
          }
        }
    });
  </script>

Upvotes: 0

Views: 206

Answers (1)

Teddy Ward
Teddy Ward

Reputation: 450

A lot of your script will have to change, perhaps most notably by upgrading to a class-based element. See the relevant section in the Polymer upgrade guide. This will include adding a call to super.ready() as the first line of your ready() function

Upvotes: 1

Related Questions