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