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
Post a Comment