title: How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local
body: <ul>
  <li>POST for Twitter Typeahead</li>
  </ul>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>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). </p>
  
  <p>I imagine this is hard-work.</p>
  
  <p>Thanks in advance for your contributors.</p>
  
  <p>Following the suggestion below. My simple example.</p>
  
  <p>JSON file</p>
  
  <pre><code>   [
      {   "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"
  
      }
    ]
  </code></pre>
  
  <p>Typeahead script</p>
  
  <pre><code>  &lt;script&gt;
  
    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()
  
    });
  
    &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>   &lt;script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"&gt;&lt;/script&gt;
  
  &lt;div class="search_content"&gt;
      &lt;input class="test1" type="text" placeholder="product"&gt;
  &lt;/div&gt;
  </code></pre>