【发布时间】：2017-07-16 08:10:34
【问题描述】：
我正在使用 Polymer 1.8（入门套件模板）。我想知道如何创建像https://codelabs.developers.google.com/ 中的搜索过滤器自定义元素
理想的结果：
如您所见，它会过滤掉其下方的卡片，每次在搜索栏中键入按键，只留下包含所需搜索词的卡片。
我想让它在这两个中找到单词：
-
<paper-card>的标题（heading中的文字） - 并在内部
divs（<paper-card>的描述）
我找到的搜索框的唯一示例是 2015 年的 this page 和 this page of the Polymer Element Catalog，它们使用了类似的搜索框，但我无法将它们调整为我的自定义元素。
这里是my-preview-cards 自定义元素：
它包含卡片本身：
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-preview-cards">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
</style>
<div>
<paper-card heading="Color picture" image="http://lorempixel.com/300/200">
<div class="card-content">An RGB picture</div>
<div class="card-actions">
<paper-button>Button</paper-button>
</div>
</paper-card>
<paper-card heading="Grey image" image="http://lorempixel.com/g/300/200">
<div class="card-content">That's a grey picture</div>
<div class="card-actions">
<paper-button>Button</paper-button>
</div>
</paper-card>
</div>
</template>
<script>
Polymer({
is: 'my-preview-cards',
});
</script>
</dom-module>
我为搜索栏创建了一个单独的自定义元素 my-search-bar：
它包含搜索栏：
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-search-bar">
<template>
<style>
/* local DOM styles go here */
:host {
display: inline-block;
}
</style>
<form on-submit="performSearch" class="flex">
<paper-input id="query" value="{{query::keyup}}" type="search" placeholder="search"></paper-input>
</form>
</template>
<script>
Polymer({
is: 'my-search-bar',
});
</script>
</dom-module>
两个自定义元素都在my-homepage 上显示为：
<div>
<my-search-bar></my-search-bar>
</div>
<div>...</div>
<div>
<my-preview-cards></my-preview-cards>
</div>
附言
我知道这是一个复杂的问题。一旦我获得 75 个代表，我将为此问题分配 50 个赏金，并且提供有效解决方案的人得到它。
【问题讨论】：
-
@tony19 感谢您编辑和修复了一些句子，伙计
-
当然，没问题:)
标签： javascript polymer polymer-1.0 web-component custom-element