javascript - 无法使 Typeahead bloodhound 工作

Question

我是第一次使用 twitter typeahead.js。我首先从一个简单的本地数组开始，然后让它开始工作。

作为下一步，我现在正尝试使其与 .json 文件一起使用。尽管我尝试了几种选择，但我无法使其正常工作，部分原因是我不太了解 bloodhound 的工作原理。

HTML代码

<div class="search_content">
  <input class="products" type="text" placeholder="products" value="">
</div>

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 代码

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()
});

Answer 1

您需要按照以下代码所示过滤响应。在此处查看更多示例以了解预输入用法 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
                };
            });
   }
}