具有自动完成功能的 Polymer/Dart 输入

Question

您是否希望在 Dart 中使用“输入”和“搜索”，最好使用 Polymer。例如，类似于 Google 地图 (www.maps.google.com) 的“输入”和“搜索”。

当您输入“输入”时，会显示一个选项列表，与正在输入的内容相关，您可以在其中选择所需的选项。

在 Polymer / Dart 中实现此行为的简单方法（或示例）是什么？

谢谢！

Answer 1

你甚至不需要 Polymer 来做这个

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

您可以通过绑定到 Polymer 中的值集合来生成 <datalist>。

更新

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