这是我的JSON文件 -
{
"patterns":
[
{
"name": "Nigel",
"desc": "As more screen space is available, side navigation can transform into tabs.",
"demoUrl": "patterns/transform-navigation/",
"sourceUrl": "https://github.com/PolymerElements/app-layout/tree/master/patterns/transform-navigation/x-app.html",
"pokemons":
[
{ "id": "01", "name": "pikachu" },
{ "id": "02", "name": "bulb" }
]
},
{
"name": "Omkar",
"desc": "Content cards may expand to take up more horizontal space.",
"demoUrl": "patterns/expand-card/",
"sourceUrl": "https://github.com/PolymerElements/app-layout/tree/master/patterns/expand-card/index.html",
"pokemons":
[
{ "id": "01", "name": "staryu" },
{ "id": "02", "name": "squirtle" }
]
},
{
"name": "Sudipto",
"desc": "Content cards may expand to take up more horizontal space.",
"demoUrl": "patterns/expand-card/",
"sourceUrl": "https://github.com/PolymerElements/app-layout/tree/master/patterns/expand-card/index.html"
}
]
}
这是我的Polymer Element,名为list-search -
<dom-module id="list-search">
<template>
<iron-ajax url="list-search-data.json" auto last-response="{{data}}"></iron-ajax>
<input type="text" value="{{filterVal::input}}">
<template is="dom-repeat" items="{{data.patterns}}" filter="{{_filter(filterVal)}}" as="main">
<br/>
<paper-item>{{main.name}}</paper-item>
<template is="dom-repeat" items="{{main.pokemons}}" as="sub">
<paper-item> {{sub.name}}</paper-item>
</template>
</template>
</template>
<script>
Polymer({
is: "list-search",
_filter: function(val) {
return function(person) {
if (~person.name.indexOf(val)) {
return person.name;
}
};
}
});
</script>
</dom-module>
如果我搜索Nigel,Omkar或Sudipto,那么过滤器工作正常。它会根据需要显示搜索结果。
但我想实现以下想法 -
如果我搜索皮卡丘,它会显示父母以及孩子示例:( Nigel pikachu)
关于如何搜索孩子和显示父母+孩子的任何想法?