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

所以我在聚合物中使用简单的自动完成方法

<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属性,就是它们的过滤方式.它可以很容易地改变,以根据你想要实现的内容过滤字符串数组.

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

解决方法

猜你在找的HTML相关文章