javascript 无法使 Typeahead 猎犬工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21684931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot make Typeahead bloodhound to work
提问by Caramba
I am using twitter typeahead.js for the first time. I first started with a simple local array and I get it to work.
我第一次使用 twitter typeahead.js。我首先从一个简单的本地数组开始，然后让它工作。
As a next step, I am now trying to make it work with a .json file. Though I tried several options I cannot make it to work and part of it is because I don't understand very well how bloodhound works.
作为下一步，我现在正在尝试使其与 .json 文件一起使用。尽管我尝试了几种选择，但我无法使其正常工作，部分原因是我不太了解 Bloodhound 的工作原理。
HTML code
HTML代码
<div class="search_content">
<input class="products" type="text" placeholder="products" value="">
</div>
JSON file (part of it)
JSON 文件（部分）
{
"Products": [
{ "name": "Pink Floyd",
"Album": "The Best Of Pink Floyd: A Foot In The Door",
"Label": "EMI UK",
"Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
"Price": "16.40",
"Genre": "Rock"
},
{
"name": "Depeche Mode",
"Album": "A Question Of Time",
"Label": "Mute",
"Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
"Price": "4.68" ,
"Genre": "Rock"
}
]
}
Typeahead.js Code
Typeahead.js 代码
var products = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '/js/products.json'
});
products.initialize();
$('.products').typeahead(null, {
name: 'products',
displayKey: 'name',
source: products.ttAdapter()
});
回答by abhi
You need to filter the response as shown in code below. See more examples here for typeahead usage https://twitter.github.io/typeahead.js/examples/
您需要过滤响应，如下面的代码所示。在此处查看更多示例以了解预先输入的用法https://twitter.github.io/typeahead.js/examples/
prefetch: {
url: '/js/products.json',
filter: function (products) {
return $.map(products.Products, function (data) {
return {
name: data.name
};
});
}
}
回答by bottens
It looks like this is a problem with the format of your data.
看起来这是数据格式的问题。
This is a properly formatted json file directly from the documentation: http://twitter.github.io/typeahead.js/data/nba.json
这是直接来自文档的格式正确的 json 文件：http: //twitter.github.io/typeahead.js/data/nba.json
If you want to keep your current format you can use the filter function to format the body of the json into the proper format.
如果您想保留当前格式，您可以使用 filter 函数将 json 的正文格式化为正确的格式。
That would look something like this
那看起来像这样
...
prefetch: {
url: '/js/products.json',
filter: function(response){
//format the data here
return response.Products
}
}
I did not test this.
我没有测试这个。
Good luck :)
祝你好运 ：）
