如何使用Bloodhound獲得Typeahead以使用JSON響應？

我想弄清楚如何讓typeahead.js with bloodhound.js與我的JSON結構一起工作。我想要的是帶有預加載的JSON對象的提前輸入功能，它保持在範圍之內。以下是部分：如何使用Bloodhound獲得Typeahead以使用JSON響應？

Data/All網址返回具有以下結構的application/json響應：

[{ 「ID」：1010，「名」：「Andijvie」，「類別」：「Blad-恩騰格爾gewassen 「}，{」 ID 「：1020，」名「：」西蘭花」，「類別」：「Blad-恩騰格爾gewassen」，（...）]

此外，在查看我有：

<div id="select-crop"> 
    <input class="typeahead" type="text" placeholder="Select crop"> 
</div>

而在JavaScript：

var cropsSuggestionEngine = new Bloodhound({ 
    datumTokenizer: function (datum) { 
     return Bloodhound.tokenizers.whitespace(datum.Name); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    prefetch: { 
     url: "/Crop/All", 
     filter: function (data) { 
      return $.map(data, function(crop) { 
       return { 
        value: crop.Name 
       }; 
      }); 
     } 
    } 
}); 

$(function() { 

    cropsSuggestionEngine.initialize(); 

    $('#select-crop .typeahead').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, { 
     name: 'Crops', 
     displayKey: 'Name', 
     source: cropsSuggestionEngine.ttAdapter(), 
     templates: { 
      empty: [ 
      '<div class="empty-message">', 
      'unable to find any results that match the current query', 
      '</div>' 
      ].join('\n'), 
      suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>') 
     } 
    }); 

});

當事情鍵入到預輸入輸入字段它總是給有不匹配查詢任何結果的消息。當我通過FireBug查看DOM時，我發現這些基準包含一個長列表和空元素。

我希望有血犬/打字頭經驗的人可以指引我走向正確的方向。我現在似乎無法弄清楚。謝謝。

來源

2015-02-09 Erwin Rooijakkers

typeahead在預取數據集中的建議對象中找不到任何「名稱」鍵。

當您定義typeahead時，您的意思是'displayKey'鍵是「Name」。但是當你知道數據集時，你的過濾器函數（在cropSuggestionEngine中）返回如下所示的json對象數組： [{value: "Andijvie "},{value: "Broccoli "}, ...]

所以沒有任何「名稱」鍵。

如果更改過濾器函數以返回{ Name: crop.Name }，則代碼正常工作。

filter: function(data) { 
    return $.map(data, function(crop) { 
     return { 
      Name: crop.Name 
     }; 
    }); 
}

希望它有幫助！

來源

2015-02-10 00:08:13 Emrah

非常感謝您的解釋！ – 2015-02-10 11:10:29

我現在實施了你的建議，它的作用就像一個魅力！很高興。 – 2015-02-10 21:51:18

不客氣，我很高興它的工作！ – Emrah 2015-02-17 09:12:34

如何使用Bloodhound獲得Typeahead以使用JSON響應？

回答

相關問題