title: typeahead.js prefetch problems
body: <p>I'm using a typeahead.js on a Google App Engine project and having problems using prefetch.</p>
  
  <p>The typeahead works fine when I use local but if I copy the same dataset to a json file and use prefetch, the typeahead does not work, i.e. no suggestions are displayed.</p>
  
  <p>Here's my version of the code using local:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;&lt;input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"&gt;&lt;/div&gt;
      &lt;script src="./js/jquery-1.10.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./js/hogan.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./js/typeahead.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
                  $('input.typeahead-example').typeahead({
                    name: 'example',
                    local: [{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'},
                      {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'},
                      {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'},
                      {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}],
                    limit: 3,
                    valueKey: 'name',
                    template: '&lt;p&gt;{{value}}&lt;/p&gt;',
                    engine: Hogan
                  });
              });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my version of the code using prefetch:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;&lt;input type="text" name="typeahead-example" placeholder="Type here" class="typeahead-example"&gt;&lt;/div&gt;
      &lt;script src="./js/jquery-1.10.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./js/hogan.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./js/typeahead.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
                  $('input.typeahead-example').typeahead({
                    name: 'example',
                    prefetch: {url: './json/example.json', ttl: '0'},
                    limit: 3,
                    valueKey: 'name',
                    template: '&lt;p&gt;{{value}}&lt;/p&gt;',
                    engine: Hogan
                  });
              });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the example.json file:</p>
  
  <pre><code>[{value: 'Abc Def', tokens: ['Abc', 'Def'], name: 'random1', val2: 'A', val3: 'B'}, {value: 'Def Ghi', tokens: ['Def', 'Ghi'], name: 'random2', val2: 'C', val3: 'D'}, {value: 'Ghi Jkl', tokens: ['Ghi', 'Jkl'], name: 'random3', val2: 'E', val3: 'F'}, {value: 'Jkl Mno', tokens: ['Jkl', 'Mno'], name: 'random4', val2: 'G', val3: 'H'}]
  </code></pre>
  
  <p>The problem occurs in Chrome and Firefox. Debugging in chrome, I can see that the example.json file is served and received. The preview and response of the network activity for example.json shows the contents of the file in its entirety. However, on the resources section of the chrome debugger, Local Storage is empty. There are no console errors, just this message</p>
  
  <pre><code>XHR finished loading: "http://localhost:8000/json/example.json". jquery-1.10.2.js:8706
  send jquery-1.10.2.js:8706
  jQuery.extend.ajax jquery-1.10.2.js:8136
  jQuery.(anonymous function) jquery-1.10.2.js:8282
  jQuery.extend.getJSON jquery-1.10.2.js:8265
  c.mixin._loadPrefetchData typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  c.mixin.initialize typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  (anonymous function) typeahead.min.js:7
  jQuery.extend.map jquery-1.10.2.js:782
  g typeahead.min.js:7
  jQuery.extend.each jquery-1.10.2.js:657
  jQuery.fn.jQuery.each jquery-1.10.2.js:266
  b.initialize typeahead.min.js:7
  jQuery.fn.typeahead typeahead.min.js:7
  (anonymous function) prefetch.html:14
  fire jquery-1.10.2.js:3048
  self.fireWith jquery-1.10.2.js:3160
  jQuery.extend.ready jquery-1.10.2.js:433
  completed
  </code></pre>
  
  <p>With respect to <a href="https://stackoverflow.com/questions/17753973/typeahead-js-trouble-suggestions-not-appear">this post</a>, I'm not having cross domain issues and with respect to <a href="https://stackoverflow.com/questions/17294606/typeahead-js-prefetch-doesnt-work/17503459#17503459">this post</a>, I've set ttl to 0 and the problem still persists.</p>
  
  <p>Any help would be appreciated.</p>
  
  <ul>
  <li>UPDATE *
  In response to suggestion from @NitzanShaked I added some console logging.</li>
  </ul>
  
  <p>First I tried this and nothing registered in the console.</p>
  
  <pre><code>$(document).ready(function(){
      $('input.typeahead-example').typeahead({
        name: 'example',
        prefetch: {
          url: './json/example.json', 
          ttl: '0',
          filter: function (data) {
              console.log(data);
              for (var i = 0; i &lt; data.length; i++) {
                  datum = data[i];
                  console.log(datum);
              }
              return data;
          }
        },
        limit: 3,
        valueKey: 'name',
        template: '&lt;p&gt;{{value}}&lt;/p&gt;',
        engine: Hogan,
      });
  });
  </code></pre>
  
  <p>Then I tried this:</p>
  
  <pre><code>$(document).ready(function(){
      $('input.typeahead-example').typeahead({
        name: 'example',
        prefetch: {url: './json/example.json', ttl: '0'},
        limit: 3,
        valueKey: 'name',
        template: '&lt;p&gt;{{value}}&lt;/p&gt;',
        engine: Hogan,
      }).bind('typeahead:opened', function (obj, datum) {
                  console.log(obj);
                  console.log(datum);
                  console.log(datum.val2);
                  });
  });
  </code></pre>
  
  <p>Which caused the console to log the following when I click inside the input field</p>
  
  <pre><code>jQuery.Event {type: "typeahead:opened", timeStamp: 1378502920480, jQuery1102039872112357988954: true, isTrigger: 3, namespace: ""…}
  currentTarget: input.typeahead-example tt-query
  data: null
  delegateTarget: input.typeahead-example tt-query
  handleObj: Object
  isTrigger: 3
  jQuery1102039872112357988954: true
  namespace: ""
  namespace_re: null
  result: undefined
  target: input.typeahead-example tt-query
  timeStamp: 1378502920480
  type: "typeahead:opened"
  __proto__: Object
   prefetch.html:22
  undefined prefetch.html:23
  Uncaught TypeError: Cannot read property 'val2' of undefined prefetch.html:24
  (anonymous function) prefetch.html:24
  jQuery.event.dispatch jquery-1.10.2.js:5095
  elemData.handle jquery-1.10.2.js:4766
  jQuery.event.trigger jquery-1.10.2.js:5007
  (anonymous function) jquery-1.10.2.js:5691
  jQuery.extend.each jquery-1.10.2.js:657
  jQuery.fn.jQuery.each jquery-1.10.2.js:266
  jQuery.fn.extend.trigger jquery-1.10.2.js:5690
  c.mixin.trigger typeahead.min.js:7
  c.mixin._propagateEvent typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  d.trigger typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  c.mixin.open typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  c.mixin._openDropdown typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  d.trigger typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  c.mixin._handleFocus typeahead.min.js:7
  proxy jquery-1.10.2.js:827
  jQuery.event.dispatch jquery-1.10.2.js:5095
  elemData.handle
  </code></pre>