聚合物纸张输入HTML DataList控件自动完成/建议名单 [英] polymer paper-input html datalist autocomplete/suggestions list

问题描述

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

so i'm using a simple autocomplete method in polymer with

<paper-input autocomplete="on" name="stuff" list="stuffs"></paper-input>

与项目的简单列表
（都试过的选择和模板元素来做到这一点）

    <datalist id="stuffs">
        <option value="blah blah"/>
            .
            .
            .
    </datalist>

的事情是，我想找出一种方法来访问的打字过程中出现的建议动态下拉列表。
有没有实际上的一种方式呢？

thing is, i wanna figure out a way to access the dynamic dropdown list of suggestions that appears during typing. is there actually a way for this?

推荐答案

我觉得那么最好的办法是不使用的DataList 。

I think your best bet then is to not use datalist.

下面是我写我自己用的一个组件的例子：

Here's an example of a component I wrote for my own use:

<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) {
            this.set('searchValue', event.model.item.name)
            this.set('value', event.model.item)
            collapse.toggle()
        }
    })
})()
</script>

_valueChanged 观察输入修改 searchValue 键，切换的崩溃。 _listFilter 过滤势必根据 searchValue DOM重复项目>。

_valueChanged observes changes to searchValue on input and toggles the collapse. _listFilter filters the items bound to dom-repeat based on searchValue.

的 #resultList 或 #collapse 元素可以放在别的地方你自己的目的。

The #resultList or #collapse element could be placed elsewhere for your own purposes.

我要指出的是选择这里是每一个都有一个名字属性，是他们是如何筛选的对象数组。它可以很容易地改变对字符串取决于你想要达到什么样的阵列进行过滤。

I should point out that choices here is an Array of Objects each of which has a name attribute which is how they are filtered. It could easily be altered to filter on a Array of Strings depending on what you're trying to achieve.

这篇关于聚合物纸张输入HTML DataList控件自动完成/建议名单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！