Javascript ember-select-2在使用带有Ajax查询的type-ahead时出现的问题

我正在使用 作为ember应用程序中的typeahead。问题是我可以从服务器获取数据，但数据没有显示在下拉列表中。如有任何帮助，将不胜感激。提前感谢

 {{select-2
    placeholder="Choose from our many pizzas"
    value=chosenTypeaheadPizza
    typeaheadSearchingText="Searching pizzas"
    typeaheadNoMatchesText="No pizzas found for '%@'"
    typeaheadErrorText="Loading failed: %@"
    query="queryPizzas"
 }}

动作处理程序是

queryPizzas(query) {    
        var self = this;
        var store = self.get('store');
        let adapter = store.adapterFor("pizzas"); 
        let serachQuery = query.term;      
           adapter.searchPizza(serachQuery).then(function(response) {

                console.log(response.pizzas);

           }); 
    },

回应

    {
    "pizzas": [{
        "id": 1,
        "name": "pizza 1"
    }, {
        "id": 2,
        "name": "pizza 2"
    }]
   }

如果您选中了ember-select-2；您可以看到，它正在使用传递给操作处理程序的

deferred

参数来显示数据。上面写着“确保不要直接调用query.callback，而是始终使用提供的deferred！”。这意味着您需要调用

deferred

，它将作为动作处理程序的第二个参数提供。我不是ember-select-2的专家，但您应该做的可能是

queryPizzas(query, deferred) {    
    var self = this;
    var store = self.get('store');
    let adapter = store.adapterFor("pizzas"); 
    let searchQuery = query.term;      
    adapter.searchPizza(searchQuery).then(function(data) {
      //try to pass the array as the data
      deferred.resolve({data: data.pizzas, more: false});
    }, deferred.reject);
}

---

上述提供的解决方案适用于您提供的数据格式。请检查相应的。在这个例子中；我使用了一个mock promise来模拟服务器远程调用，并返回了您提供的示例数据，作为要在select中显示的内容。您必须使用

optionLabelPath

才能在select中显示比萨饼的名称，如

应用程序中所示。hbs

现在它在console TypeError中显示：无法读取未定义的属性“length”。我已经添加了响应数据。@vivek，正如我所说，我自己从未使用过该组件；但只是尝试一下。我已经更新了关于您回复数据的答案。你能试一试吗？它仍然显示TypeError:无法读取未定义的属性'length'。响应数组中每个对象都有两个属性，我需要显示披萨的名称，以便加载项如何检测其名称属性？@vivek抱歉，我周末没有时间检查此内容。请看我在答案中提供的玩法。我提供的答案应该是正确的。您能否确保数据按预期从服务器到达？