Question

我一直在尝试使用纸张自动完成功能来获取输入字段的自动建议。我正在使用Polymer 3.0

在输入字段中输入内容时，我会得到自动建议下拉列表，但是显示为空。

import { PolymerElement, html } from "./node_modules/@polymer/polymer/polymer-element.js";
import './node_modules/@fluidnext-polymer/paper-autocomplete/paper-autocomplete.js';

class MyBot extends PolymerElement {
   static get template()
   {
       return html`
           <paper-autocomplete label="Search Something" source={{array}}> 
           </paper-autocomplete>

           <iron-ajax
        auto
        id= "getSuggestions"
                url=""
                handle-as="json"
                on-response="autosuggest"
                debounce-duration="300">
       </iron-ajax>
    `;
   }

   static get properties()
   {

   };

   autosuggest(responses)
   {
       console.log('questions');
       let rows = responses.detail.response; //console.log(rows);
       let result=[]; 
       for(var i in rows)
       result.push( rows [i]['question']);
       this.array=result;
    }

}

我遇到这些错误

在名为paper-material-styles style-gather.js：82的模块中找不到样式数据

2。自动提示下拉列表未显示任何数据。（对不起，由于声誉下降，我无法发布照片）

使用

获得建议

<paper-autocomplete label="Search Something" source={{array}}  text-property="key"> </paper-autocomplete>

其中key是数组中的键

Answer 1

尝试将“数组”添加到属性对象。也许将“数组”重命名为更合理的名称，例如searchList

static get properties()
   {
       searchList: Array
   };

查看变量是否被更新的一种好方法是打开元素检查器，然后选择外部元素：在dom-inspector中并在终端中键入$ 0.searchList以查看变量值。其中“ searchList”是您的变量名。

Answer 2

为了观察对象或数组使用的变化；

autosuggest(responses) {
       ...
       this.set('array', result); // instead of this.array=result;
}

这里是more information的相关链接：

纸张自动完成不显示任何结果

2 个答案: