I am using twitter typeahead.js for the first time. I first started with a simple local array and I get it to work.

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.

HTML code

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

JSON file (part of it)

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

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

I am using twitter typeahead.js for the first time. I first started with a simple local array and I get it to work.

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.

HTML code

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

JSON file (part of it)

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

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

• javascript
• json

2 Answers 2

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/

prefetch: {
  url: '/js/products.json',
  filter: function (products) {
            return $.map(products.Products, function (data) {
                return {
                    name: data.name
                };
            });
   }
}

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

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.

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 :)