论文自动完成建议来源来自 Iron-ajax 响应

Question

我使用 paper-autocomplete-suggestions 创建了自动完成输入，我想从iron-ajax响应中获取源，这是我的代码：

<iron-ajax id="procedureSource"
                   url="api.json">
</iron-ajax>
<template is="dom-repeat" id="sub-intents" items="{{data.data}}">
     <div class="autocomplete-wrapper">
          <paper-input name="sub_intent[procedure_id]" id="selectProcedure[[item.id]]" label="Select Procedure" on-keypress="_checkProcedureKeyPress"></paper-input>
          <paper-autocomplete-suggestions id="selectProcedureSuggestion[[item.id]]" for="selectProcedure[[item.id]]" remote-source></paper-autocomplete-suggestions>
      </div>
</template>

我在paper-input上使用on-keypress事件来触发iron-ajax输入值长度应等于或大于 3 的请求。 这是我的脚本：

<script>
Polymer({
     is: 'input-autocomplete',
     _checkProcedureKeyPress: function (event){
     var keyword = event.target.value;
     var target_id = event.target.closest('paper-input').id.replace('selectProcedure', '');
           if(keyword.length >= 3){
               this.$.procedureSource.params = {name: keyword};
               var request = this.$.procedureSource.generateRequest();
               var p = request.completes;
               p.then(function(xhr, response) {
                   var data = request.response;
                   var autocompleteSuggestions = document.querySelector('#selectProcedureSuggestion' + target_id);
                   autocompleteSuggestions.source = data;
                   autocompleteSuggestions.addEventListener('autocomplete-selected', function (event) {
                       var selected = event.detail.text;
                       console.log(selected);
                   });
               })
           }
})
</script>

自动完成未显示，我确定源也可以从iron-ajax响应、元素目标(paper-autocomplete-suggestion元素(中获得。

Answer 1

看起来这个组件只在remoteSource为 false 时才处理source，并且必须在关联的<input>获取值之前设置source(例如，通过静态数据(。否则，使用 remoteSource ，您必须手动设置建议数据(在处理来自远程源的原始数据之后(。

在您的情况下，虽然直接设置_suggestions(受保护的属性(大多有效，但可能建议为此(suggestions()(使用元素的公共 API，以便正确重置内部索引。

演示

Answer 2

我找到了它。必须将数据分配给_suggestions属性而不是source属性

var data = request.response;
var autocompleteSuggestions = document.querySelector('#selectProcedureSuggestion' + target_id);
autocompleteSuggestions._suggestions = data;
autocompleteSuggestions.addEventListener('autocomplete-selected', function (event) {
   var selected = event.detail.text;
});