纸质输入：提前输入建议值答案

【问题标题】：paper-input: Suggest values in typeahead纸质输入：提前输入建议值
【发布时间】：2015-03-14 22:25:40
【问题描述】：

有没有使用 Polymer 的 <paper-input> 元素实现预输入的简单方法？ HTML <datalist> tag 似乎实现了普通的<input> 标签，我可以使用模板动态更新数据列表。

但是，这没有任何作用：

<paper-input
  label="Topic"
  list="dl">
</paper-input>
<datalist id="dl">
  <option>a</option>
  <option>aa</option>
  <option>aaa</option>
  <option>ab</option>
</datalist>

【问题讨论】：

标签： polymer web-component html-input

【解决方案1】：

签出此元素。它是一个具有预先输入功能的元素。

https://github.com/cheonhyangzhang/paper-typeahead-input

这里是演示和文档页面 http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/

【讨论】：

【解决方案2】：

Vaadin Combo Box https://vaadin.com/elements/-/element/vaadin-combo-box 是一个很好的 apache-2 许可选项，用于适合纸张元素的预输入。

【讨论】：

【解决方案3】：

Polymer/paper-input 已被弃用，当前支持的版本是PolymerElements/paper-input。

在 Polymer 1.0+ 中使用带有纸张输入的数据列表：

<paper-input-container>
    <input list="choices" is="iron-input">
    <datalist id="choices">
        <option value='a'></option>
        <option value='ab'></option>
        <option value='ac'></option>
        <option value='ffa'></option>
    </datalist>
</paper-input-container>

【讨论】：

【解决方案4】：

除了您滥用选项之外，

<datalist id="dl">
  <option value='a'></option>
  <!-- WRONG: <option>a</option> -->
</datalist>

我建议您查看paper-input 代码并使用paper-input-decorator 与paper-input 一样的普通输入：

<paper-input-decorator id="decorator">
  <input list="dl" is="core-input">
  <datalist id="dl">
    <option value='a'></option>
    <option value='ab'></option>
    <option value='ac'></option>
    <option value='ffa'></option>
  </datalist>
</paper-input-decorator>

【讨论】：