paper-input: Suggest values in typeahead

问题

Is there an easy way to implement a typeahead using Polymer's <paper-input> element? The HTML <datalist> tag seems to implement that for normal <input> tags and I could dynamically update the data list using templates.

However, this does nothing:

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

回答1:

Besides the fact you misuse options,

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

I would suggest you to take a look into paper-input code and use paper-input-decorator with plain input as they do for 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>

回答2:

Polymer/paper-input has been deprecated, the currently supported version is PolymerElements/paper-input.

To use a datalist with paper-input in 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>

回答3:

Vaadin Combo Box https://vaadin.com/elements/-/element/vaadin-combo-box is a good apache-2 licensed option for a typeahead that fits in with the paper elements.

回答4:

Checkout this element. It's an element has the typeahead function.

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

Here is the demo & doc page http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/

来源：https://stackoverflow.com/questions/27981869/paper-input-suggest-values-in-typeahead

标签

polymer

web-component

html-input