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已被弃用，目前支持的版本为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 Combo Box https://vaadin.com/elements/-/element/vaadin-combo-box是一个很好的apache-2许可选项，适用于适合纸质元素的打字机。

Answer 4

结帐此元素。它是一个具有typeahead功能的元素。

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

这是演示＆amp; doc页面 http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/

paper-input：在typeahead中建议值

4 个答案: