How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local

POST for Twitter Typeahead

I have been for 2 days now, trying to understand and have a clear picture on how to use /manage typeahead.js 0.10 in order to use local, remote and fetched data.

Honestly, the bloodhound engine is not clear for me and detailed information on how to manipulate / access json objects and arrays is still a question mark.

I can make the local example to work but anytime I try to use the prefetch or remote options, and besides several ticks, I cannot make to work.

My goal with this post is not to just get an answer to my problem but rather find someone that has the complete knowledge of it and that is able to, in a very simple way, explain step-by step (with examples / jsfiddles - including json examples, to know what actually is being parsed) how this thing works.

I think a lot a people is looking forward to understand it and this will be a great great contribution (as other detailed posts we know exist).

I imagine this is hard-work.

Thanks in advance for your contributors.

Following the suggestion below. My simple example.

JSON file

   [
    {   "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"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

Typeahead script

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>

Solution

I just spent some days trying to get this to work my self, and I totally agree that its not intuitive. In particular there was one thing on the typeahead page about Bloodhound that try as I might just didn't work. For example the following line:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') -- would always yield an error because obj didnt exist.

For the datumTokenizer use the following form(where "DisplayText" is the name of the property in your object that contains the text that will be displayed):

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

and remember when you create the typeahead set the displayKey to the name of the property in your collection that has the text data you want to display. For me this was always the same as the property I wanted to tokenize - so my typeahead statement looked like the following:

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }