paper-input：预先输入建议值

Question

是否有使用 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>

Answer 1

除了你误用选项之外，

<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>

Answer 2

Polymer/paper-input has been deprecated, the currently supported version is 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>

Answer 3

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

Answer 4

检查这个元素。这是一个元素具有提前输入功能。

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

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

paper-input：预先输入建议值

paper-input: Suggest values in typeahead

polymer

web-component

html-input