Бумажный ввод: Предложите значения в typeahead

Question

Есть ли простой способ реализовать typeahead с использованием элемента 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 с простым входом, как они do для 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.

Чтобы использовать DataList с бумажным входом в 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 является хорошим апач-2 лицензированным вариантом для машинописного, который помещается в с бумажными элементами.

Answer 4

Оформить заказ на этот элемент. Элемент имеет функцию typeahead.

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

Вот документ страница демо & http://cheonhyangzhang.github.io/paper-typeahead-input/components/paper-typeahead-input/