Polymer/Dart Input with autocomplete

Question

Would you like an "input" with "search" in Dart preferably using Polymer. For example, something similar to the "input" and "search" of the Google Maps (www.maps.google.com).

When you type in "input", a list of options is presented, related to what is being typed, in which you can select the desired option.

What would be a simple way (or example) to implement this behavior in Polymer / Dart?

Thanks!

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-09-14T16:03:26

You don't even need Polymer for this

http://www.w3schools.com/tags/tag_datalist.asp

You can generate the <datalist> by binding to a collection of values in Polymer.

UPDATE

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-input id="pi"></paper-input>
    <datalist id="dl">
      <option>abc</option>
      <option>abcd</option>
      <option>bcd</option>
      <option>bcde</option>
    </datalist>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

import 'dart:html' as dom;
import 'package:polymer/polymer.dart';

@CustomTag('app-element')

class AppElement extends PolymerElement {

  AppElement.created() : super.created() {
  }

  attached() {
    super.attached();
    var inp = $['pi'].querySelector('* /deep/ input') as dom.TextInputElement;
    inp.parentNode.append($['dl']); // seems to be only found when it is inside the same shadowRoot
    inp.attributes['list'] = 'dl';  // assign the id of the datalist to the 'list' attribute
  }
}

Polymer/Dart Input with autocomplete

1 Answers