Paper-input: Suggest Values In Typeahead

Is there an easy way to implement a typeahead using Polymer's element? The HTML

Solution 1:

Besides the fact you misuse options,

<datalistid="dl"><optionvalue='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-decoratorid="decorator"><inputlist="dl"is="core-input"><datalistid="dl"><optionvalue='a'></option><optionvalue='ab'></option><optionvalue='ac'></option><optionvalue='ffa'></option></datalist></paper-input-decorator>

Solution 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><inputlist="choices"is="iron-input"><datalistid="choices"><optionvalue='a'></option><optionvalue='ab'></option><optionvalue='ac'></option><optionvalue='ffa'></option></datalist></paper-input-container>

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

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