Search code examples
polymerweb-componenthtml-input

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>

Solution

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