所以我在聚合物中使用简单的自动完成方法
<paper-input autocomplete="on" name="stuff" list="stuffs"></paper-input>
有一个简单的项目列表
(尝试使用select和template元素来执行此操作)
<datalist id="stuffs">
<option value="blah blah"/>
.
.
.
</datalist>
解决方法
我认为你最好的选择就是不要使用datalist.
这是我为自己编写的组件示例：
<dom-module id="paper-autocomplete">
<style>
iron-collapse {
Box-shadow: 6px;
}
paper-button {
width: 100%;
text-transform: none;
}
</style>
<template>
<paper-input-container>
<label>{{label}}</label>
<content select=".content"></content>
<input id="searchBox" class="paper-input-input" is="iron-input" bind-value="{{searchValue::input}}"></input>
</paper-input-container>
<iron-collapse id="collapse">
<paper-material>
<div>
<template id="resultList" is="dom-repeat" items="{{choices}}" filter="_listFilter">
<paper-item>
<paper-button on-tap="_selectItem">{{item.name}}</paper-button>
</paper-item>
</template>
</div>
</paper-material>
</iron-collapse>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: "paper-autocomplete",properties: {
choices: Array,label: String,value: {
type: Object,},searchValue: {
type: String,value: '',observer: "_valueChanged"
}
},ready: function() {
this.$.resultList.render()
},_valueChanged: function(e) {
var collapse = this.$.collapse
if (e != '' && !collapse.opened) {
this.$.resultList.render()
collapse.toggle()
} else
if (e == '' && collapse.opened) {
collapse.toggle()
}
},_listFilter: function(item) {
return item.name.toLowerCase().includes(
this.searchValue.toLowerCase()
)
},_selectItem: function(event) {
var collapse = this.$.collapse;
this.set('searchValue',event.model.item.name)
this.set('value',event.model.item)
collapse.toggle()
}
})
})()
</script>
_valueChanged观察输入中对searchValue的更改并切换折叠. _listFilter根据searchValue过滤绑定到dom-repeat的项目.
可以将#resultList或#collapse元素放在其他位置以用于您自己的目的.
编辑
我应该指出,这里的选择是一个对象数组,每个对象都有一个name属性,就是它们的过滤方式.它可以很容易地改变,以根据你想要实现的内容过滤字符串数组.
