jquery - twitter bootstrap typeahead cache json result -
i using twitter bootstrap lib in application , being great experience. i'm implementing bootstrap typeahad autocomplete. here having problem caching results avoid many requests server. while doing research on web found lib https://github.com/twitter/typeahead.js called twitter typeahead. seems different 1 on boottrap http://twitter.github.io/bootstrap/javascript.html#typeahead. wrong?
the first option seems suitable intended have following questions:
- how use prefetch? has pre-existing json file or may first request server on pageload? - is there working example use prefetch , remote? 
just reference : actual code twitter boottrap typeahead ( not twitter typeahead )
$searchbox.typeahead(       {           minlength: 2,           source: function (query, process) {               $searchid.val('');               persons = [];               map = {};               $.getjson("app_services/myservice.svc/getdata", { 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 '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';           }       }) just clarify. trying create cache of results , use server if no match found in cache.
window.query_cache = {}; $searchbox.typeahead({     minlength: 2,     source: function(query, process) {         if (query_cache[query]) {             process(query_cache[query]); //if cached, use !             return;         }         $searchid.val('');         persons = [];         map = {};         $.getjson("app_services/myservice.svc/getdata", {             max: 100,             criteria: query         }, function(data) {             $.each(data, function(i, person) {                 map[person.name] = person;                 persons.push(person.name);             });             query_cache[query] = persons; //add if doesn't exist.             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 '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';     } }) what code ?
- it defines global variable query_cache;
- then looks cached results. , if present, process that, no load on server.
- if not cached, caches it, next time, can used.
- solves problem.
Comments
Post a Comment