title: Where I am Going Wrong With Typeahead.js Prefetch
body: <p>I have been trying all week to get typeahead.js (<a href="https://github.com/twitter/typeahead.js" rel="nofollow">https://github.com/twitter/typeahead.js</a>) to work.</p>
  
  <p>I can get the local version working, however I cannot get the prefetch working. I have a results.json file that is generated from a connection.php file. The JSON contains first_names and last_names. If I can get this simple methods to work I think I will have a better understanding of where I am going wrong.</p>
  
  <p>I have included my files below.</p>
  
  <h2>local method - working</h2>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/typeahead.bundle.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="countries"&gt; 
  &lt;div class="demo"&gt;
  &lt;input class="typeahead form-control" type="text" placeholder="Countries" autocomplete="off" spellcheck="false" dir="auto" &gt; 
  &lt;input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; "&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  var numbers;
  var countries = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  limit: 10,
  local: [
  { name: 'Andorra' },
  { name: 'United Arab Emirates' },
  { name: 'Afghanistan'},
  { name: 'Antigua and Barbuda'},
  { name: 'Anguilla'},
  ]
  });
  
  countries.initialize();
  
  $('.countries .typeahead').typeahead(null, {
  displayKey: 'name',
  source: countries.ttAdapter()
  });
  
  });
  &lt;/script&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>prefetch method - not working</h2>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/typeahead.bundle.js"&gt;&lt;/script&gt;
  &lt;script src="js/examples.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div class="names"&gt; 
  &lt;div class="demo"&gt;
  &lt;input class="typeahead form-control" type="text" placeholder="names" autocomplete="off" spellcheck="false" dir="auto" &gt; 
  &lt;input class="typeahead form-control" type="text" disabled="" autocomplete="off" spellcheck="false" style="visibility: hidden; "&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>example.js</strong></p>
  
  <pre><code>  $(document).ready(function() {
    var numbers;
  var countries = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
      url: './countries.json',
      filter: function(list) {
        return $.map(list, function(country) { return { name: country }; });
      }
    }
  });
  
  countries.initialize();
  
  $('.countries .typeahead').typeahead(null, {
    name: 'countries',
    displayKey: 'name',
    source: countries.ttAdapter()
  });
  
  });
  </code></pre>
  
  <p><strong>connection.php</strong></p>
  
  <pre><code>&lt;?php
  $dbhost = 'localhost';
  $dbuser = 'myuser';
  $dbpass = 'password';
  $conn = mysql_connect($dbhost, $dbuser, $dbpass);
  
  if(! $conn )
  {
    die('Could not connect: ' . mysql_error());
  }
  $sql = 'SELECT first_name, last_name FROM actor';
  
  mysql_select_db('mydb');
  
  $return_arr = array();
  
  $fetch = mysql_query("SELECT first_name, last_name FROM actor"); 
  
  while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
      $row_array['first_name'] = $row['first_name'];
      $row_array['last_name'] = $row['last_name'];
      array_push($return_arr,$row_array);
  }
  
  $fp = fopen('results.json', 'w');
  fwrite($fp, json_encode($return_arr));
  
  
  mysql_close($conn);
  
  ?&gt;
  </code></pre>
  
  <p>My results.json file in in the following format if that helps;</p>
  
  <pre><code>[{"first_name":"PENELOPE","last_name":"GUINESS"},{"first_name":"NICK","last_name":"WAHLBERG"},{"fir...... ...
  </code></pre>
  
  <p>I appreciate any help or direction that anybody can lend, I am quite new to this and would like to learn as much as possible!</p>
  
  <p><strong>update 1</strong>
  Following advice from @mgobi_php  I had a look at the chrome dev tools console and can see <code>"XHR finished loading: GET "http://localhost/dvd/countries.json"</code> So it seems like the json file is being recognised, but not loading?</p>