在使用type-ahead與Ajax查詢時使用type-ahead問題

Question

我正在使用 ember-select-2作爲ember應用程序中的一個類型。問題是我可以從服務器獲取數據，但數據未顯示在下拉列表中任何幫助將不勝感激。提前感謝。

{{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" 
    }] 
    } 

Answer 1

如果選中的examples餘燼選-2;您可以看到它使用傳遞給動作處理程序的deferred參數來顯示數據。它說：「確保不直接調用query.callback，但總是使用提供的延遲！」。這意味着，您需要調用deferred作爲動作處理程序的第二個參數。我不是在餘燼選-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); 
} 

提供的解決方案適用於您所提供的數據格式。請檢查相應的twiddle。在這個例子中，我使用模擬承諾來模擬服務器遠程調用，並返回您提供的示例數據作爲要在select中顯示的內容。您必須使用optionLabelPath才能在選擇中顯示比薩餅的名稱，如application.hbs中所見。