title: Typeahead blank results - can't figure out why
body: <p>I am at my wits end. I have asked a similar question before but now I am trying to use Twitters examples exactly (following <a href="http://twitter.github.io/typeahead.js/examples/#multiple-datasets" rel="nofollow">http://twitter.github.io/typeahead.js/examples/#multiple-datasets</a> but with only one dataset) and can't get anything to work.</p>
  
  <p>I have a data stored JSON file that looks like this (short version)</p>
  
  <pre><code>[
    {
      "crs_code":"aml",
      "station_name":"Acton Main Line"
    },
    {
      "crs_code":"amt",
      "station_name":"Aldermaston"
    }
  ]
  </code></pre>
  
  <p>which is in a file called stations.json</p>
  
  <p>and I have the following code which just results in an input field with no typeahead</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;CRS Example&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/typeahead.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="http://twitter.github.io/hogan.js/builds/2.0.0/hogan-2.0.0.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="dataset"&gt;
      &lt;input class="typeahead" type="text" placeholder="Stations"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var stations = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('station_name'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: 'data/stations.json'
      });
  
      stations.initialize();
  
      $('#dataset .typeahead').typeahead({
                  highlight: true
              },
              {
                  name: 'crs',
                  displayKey: 'station_name',
                  valueKey: 'crs_code',
                  source: stations.ttAdapter(),
                  templates: {
                      header: '&lt;h3 class="station-name"&gt;Station Lookup&lt;/h3&gt;'
                  }
              });
  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't get any error, I can view the datums in console.log, I just cant get them to be usable by the typeahead. If I open up google tools, and type console.log(stations) I can see the object list.</p>
  
  <p>Any help appreciated</p>
  
  <p>Thanks</p>