在聚合物中使用来自本地 DOM 的数据列表

Question

我的自定义组件 'autocomplete-input' 应该提供自动完成功能。我正在使用 'paper-input' 的 'list' 属性。 'list' 属性的值必须是 'datalist'.

的 'id'

这很好用，只要我只实例化一个 'autocomplete-input' 元素。如果 'autocomplete-input' 元素有多个实例，它们都会显示相同的自动完成建议。我猜这是因为 'list' 属性不使用本地 DOM，因此使用第一个 'datalist' 和那个特定的 'id'。我怎样才能避免这种情况？

'autocomplete-input'元素：

<dom-module id="autocomplete-input">
  <template>
    <datalist id="autocomplete">
      <template is="dom-repeat" items="{{proposals}}">
        <option data-value$="{{item.value}}">{{item.content}}</option>
      </template>
    </datalist>
    <paper-input id="input" list="autocomplete" label="{{header}}" value="{{content::input}}"></paper-input>
  </template>
  <script>
  Polymer({
    is: 'autocomplete-input',
    properties: {
      header: String,
      content: String,
      proposals: Array
    }
  });
  </script>
</dom-module>

Answer 1

使用全局计数器并将其添加到您的 ID

<dom-module id="autocomplete-input">
  <template>
    <datalist id$="[[autocompleteId]]">
      <template is="dom-repeat" items="{{proposals}}">
        <option data-value$="{{item.value}}">{{item.content}}</option>
      </template>
    </datalist>
    <paper-input id="input" list$="[[autocompleteId]]" label="{{header}}" value="{{content::input}}"></paper-input>
  </template>
  <script>
  Polymer({
    is: 'autocomplete-input',
    properties: {
      header: String,
      content: String,
      proposals: Array,
    }
  }),
  autoCompleteId: function() {
    return this.autocompleteId = this.autocompleteId || ++globalId; 
    // see linke below to figure out how to use globals
  }
  </script>
</dom-module>

有关 Polymer 中全局变量的更多详细信息，请参阅 Polymer 1.0 Global Variables（我的 JS 不够好，因为我只使用 Dart 中的 Polymer）

在聚合物中使用来自本地 DOM 的数据列表

Using datalist from local DOM in polymer

javascript

autocomplete

web-component

polymer

polymer-1.0