如何使用iron-list添加搜索联系人，如演示应用程序

Question

我正在尝试实现一个简单的联系人列表的one shown here。我按照该示例中给出的方式设置了数据源和所有内容。现在，如果我想在页面顶部添加搜索框或下拉框，以便用户选择下拉菜单或在搜索框中键入内容，我如何过滤我的结果。例如:如果用户在搜索框中键入"GRI“，我需要显示名字与"GRI”匹配的所有联系人。你知道我该如何实现它吗？

Answer 1

假设您按如下方式显示联系人列表：

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

你的列表看起来像这样：

...
...
<script>
filteredContacts: {
   type: Array,
   value: [],
}
unfilteredContacts: {
   type: Array,
   value: [{name:"testcontact1"}, {name: "testcontact2"}],
}

//this should be called when input changes on your text input
onFilterTextInputChange : function(){
   this.filteredContacts = []; //we empty the array so that old results won't be shown
   var filterString = this.$.myFilterTextInput.value(); // we retrieve the text from the text input that we are supposed to filter on
   for(var i=0;i<this.unfilteredContacts.length; i++)
   {
      //Here you make your filtering logics (the example below will only show contacts whose name match exactly what you type in the input field)
      var contact = this.unfilteredContacts[i];
      if(contact.name == filterString)
         this.push("filteredContacts", contact);
   }
}
</script>

注意，上面的代码可能不能仅用于复制-粘贴。可能有一些语法错误，但您应该了解如何继续进行。:)