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 ?

  1. it defines global variable query_cache;
  2. then looks cached results. , if present, process that, no load on server.
  3. if not cached, caches it, next time, can used.
  4. solves problem.

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -