Are there any plans to create a paper-autocomplete (or iron-autocomplete) component anytime soon for Polymer 1.0?

1,303 views
Skip to first unread message

neeraj...@gmail.com

unread,
Jun 19, 2015, 10:35:40 AM6/19/15
to polym...@googlegroups.com
Have been searching for an autocomplete component that I can use with my app. 
The catalog does not have something similar and cheesel seems to work only for Polymer 0.5.0.

Any plans to create a component for the same?

bourget....@gmail.com

unread,
Jun 22, 2015, 10:12:15 AM6/22/15
to polym...@googlegroups.com, neeraj...@gmail.com
We've been using the native HTML5 `datalist` and `autocomplete="on"` on the `paper-input` elements.  The latest latest paper-input have support to pass on `list` and `autocomplete` so that native autocomplete works.

Alexandre

con.an...@gmail.com

unread,
Jun 24, 2015, 3:33:04 PM6/24/15
to polym...@googlegroups.com, bourget....@gmail.com, neeraj...@gmail.com
Thanks. How do you combine them to work well together? Are you following MDN's spec? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

azumb...@google.com

unread,
Jul 31, 2015, 11:09:22 AM7/31/15
to Polymer, neeraj...@gmail.com
Any example of this?

Tried this with setting list$="[[countries]]" on the paper-input, but it doesn't seem to work.

Nathan Hadfield

unread,
Jul 31, 2015, 3:41:25 PM7/31/15
to Polymer, neeraj...@gmail.com, azumb...@google.com
The documentation for paper-input-behavior.html says that `list` should be of type String and should match the id of an existing <datalist> element. So you would have to create HTML for the datalist element, and then in your <input> element set `list="<id>"` and `autocomplete="on"`, where <id> is the id of your datalist. 

Basically you're just using list and autocomplete attributes according to the HTML5 spec, as described here: http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element

You should be able to create the datalist using a repeat template, like this (untested):

<datalist id="countries-list">
<template is="dom-repeat" list="[[countries]]">
    <option value="[[item]]">
</template>
</datalist>

<paper-input list="countries-list" autocomplete="on"></paper-input>
Reply all
Reply to author
Forward
0 new messages