title: Speeding up Twitter Bootstrap's Typeahead on JSON object
body: <p>So, I'm starting a dictionary web app using Twitter Bootstrap's Typeahead. The dictionary object is enormous (5000 entries). Under my current code</p>
  
  <pre><code>$('#dictionary').typeahead({source: function(query, process){
  
      $.getJSON('dictionary.json', function(data){
          dict = data;
          var words = _.keys(dict);
          process(words);
      });
  
  }, minLength: 2});
  </code></pre>
  
  <p>I do a get everytime the typeahead element (#dictionary) is accessed. While this makes the query very fast once an entry is in the search box, it makes typeahead almost too slow to work as it takes forever to get the dictionary.json (1+ MB) and parse it.</p>
  
  <p>Clearly this strategy is wrong.</p>
  
  <p>Here's what I'm thinking:
  1. Put the get into a pre-load variable and accept page loaded once dictionary.json has loaded.
  2. Create a separate array with just the key values from dictionary.json and pre-load this array through a get (this would be even smaller and faster).</p>
  
  <p>I'm fine with the load taking longer. I'm fine with search taking longer. But having the autocomplete in typeahead take a long time is unworkable from a UI standpoint. Obviously the big kids at google et al. have a trick for this: google doesn't take too long to pre-load and the search is blazing fast all while the autocomplete works.</p>
  
  <p>So, what do you guys think of my above-outlined ideas?
  Do you have any other suggestions?</p>
  
  <p>Thanks so much for you help.</p>