聚合物纸输入html datalist自动完成建议列表

概述所以我在聚合物中使用简单的自动完成方法 <paper-input autocomplete="on" name="stuff" list="stuffs"></paper-input> 有一个简单的项目列表 (尝试使用select和template元素来执行此 *** 作) <datalist id="stuffs"> <option value="blah blah"/> 所以我在聚合物中使用简单的自动完成方法

<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> <content select=".content"></content> <input ID="searchBox" 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自动完成/建议列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。