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