polymer - How to add search for contacts like demo app using iron-list -


i trying implement simple contacts list one shown here. setup data source , given in example. if want add search box or dropdown @ top of page user selects drop-down menu or types in search box, how filter results. example: if user types "gri" in search box need show contacts firstname matching "gri". ideas how implement this?

let's show contacts list this:

<template is="dom-repeat" items="{{filteredcontacts}}" as="contact">    <div>{{contact.name}}</div> </template> 

and have list looks this:

... ... <script> filteredcontacts: {    type: array,    value: [], } unfilteredcontacts: {    type: array,    value: [{name:"testcontact1"}, {name: "testcontact2"}], }  //this should called when input changes on text input onfiltertextinputchange : function(){    this.filteredcontacts = []; //we empty array old results won't shown    var filterstring = this.$.myfiltertextinput.value(); // retrieve text text input supposed filter on    for(var i=0;i<this.unfilteredcontacts.length; i++)    {       //here make filtering logics (the example below show contacts name match type in input field)       var contact = this.unfilteredcontacts[i];       if(contact.name == filterstring)          this.push("filteredcontacts", contact);    } } </script> 

note, code above might not work copy-paste. there might syntax errors, should drift on how can proceed. :)


Comments

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -