title: twitter bootstrap typeahead cache json result
body: <p>I am using twitter bootstrap lib in my application and is being a great experience. Now i'm implementing bootstrap typeahad for autocomplete.
  Here I am having a problem with caching the results to avoid many requests to the server. while doing research on the web I found this lib <a href="https://github.com/twitter/typeahead.js" rel="nofollow noreferrer">https://github.com/twitter/typeahead.js</a> also called twitter typeahead. It seems that is very different from the one on boottrap <a href="http://twitter.github.io/bootstrap/javascript.html#typeahead" rel="nofollow noreferrer">http://twitter.github.io/bootstrap/javascript.html#typeahead</a>. Am I wrong?</p>
  <p>The first option seems to be the most suitable for the intended but I have the following questions:</p>
  <ul>
  <li><p>How do I use prefetch? This has to be a pre-existing json file or may be a first request to the server on pageload?</p>
  <p>Is there any working example that use the prefetch and the remote?</p>
  </li>
  </ul>
  <p>Just for reference : this is my actual code with twitter boottrap typeahead ( not twitter typeahead )</p>
  <pre><code>$searchbox.typeahead(
        {
            minLength: 2,
            source: function (query, process) {
                $SearchID.val('');
                persons = [];
                map = {};
                $.getJSON(&quot;App_Services/MyService.svc/GetData&quot;, { max: 100, criteria: query }, function (data) {
   
                    $.each(data, function (i, person) {
                        map[person.name] = person;
  
                        persons.push(person.name);
                    });
                    process(persons);
                });
  
            },
            updater: function (item) {
                selected = map[item].id;
                //alert(selected)
                return item;
            },
            matcher: function (item) {
                if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                    return true;
                }
            },
            sorter: function (items) {
                return items.sort();
            },
            highlighter: function (item) {
                var regex = new RegExp('(' + this.query + ')', 'gi');
                return '&lt;div&gt;' + item.replace(regex, &quot;&lt;strong&gt;$1&lt;/strong&gt;&quot;) + '&lt;/div&gt;';
            }
        })
  </code></pre>
  <p>Just to clarify. What I am trying to do is create a cache of the results and use only the server if no match is found in the cache.</p>