大佬教程收集整理的这篇文章主要介绍了聚合物纸输入html datalist自动完成/建议列表，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<paper-input autocomplete="on" name="stuff" list="stuffs"></paper-input>
有一个简单的项目列表
(尝试使用SELEct和template元素来执行此操作)
<datalist id="stuffs"> <option value="blah blah"/> . . . </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属性,就是它们的过滤方式.它可以很容易地改变,以根据你想要实现的内容过滤字符串数组.
以上是大佬教程为你收集整理的聚合物纸输入html datalist自动完成/建议列表全部内容，希望文章能够帮你解决聚合物纸输入html datalist自动完成/建议列表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。