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

Posted 2023-03-31

【中文标题】聚合物纸输入 html 数据列表自动完成/建议列表

【英文标题】：polymer paper-input html datalist autocomplete/suggestions list

【发布时间】：2015-09-10 21:26:21

【问题描述】：

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

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

带有一个简单的项目列表 （尝试了 select 和 template 元素来做到这一点）

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

问题是，我想找到一种方法来访问在键入过程中出现的建议的动态下拉列表。 真的有办法吗？

【问题讨论】：

您能否阐明访问它的意思？你想达到什么样的行为？

喜欢将其打印在不同的区域而不是当前的下拉表单中

Are there any built in auto-complete input components for Polymer 1.0?的可能重复

【参考方案1】：

我认为你最好的选择是不使用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 元素可以出于您自己的目的放置在其他地方。

编辑

我应该指出choices 这里是一个对象数组，每个对象都有一个名称属性，这是它们被过滤的方式。根据您要实现的目标，可以轻松地将其更改为过滤字符串数组。

【讨论】：

似乎没有任何方法可以导入 PolymerElement 组件，因此它们确实可以工作。

这些好东西应该先导入（使用适合您设置的路径）：

【参考方案2】：

如果您更喜欢现成的 Polymer 元素，我建议您查看 https://vaadin.com/elements/-/element/vaadin-combo-box