Caching dynamic queries

[ivan-ilinov]

I have dynamic source via JSON-callback with "key" GET-parameter.
Can jQuery Typeahead plugin cache the results of such queries (for each already passed 'key' value)?

[kavin-90]

I will like that feature currently you can cache jquery-ui autocomplete search series via custom cache so there might be a way to cache dynamic results

[running-coder]

it would be possible to build a partial cache for dynamic request. If the user types "test" and the partial cache doesn't contain the number maxItem of matching elements a request is then sent and the new elements added to the partial cache

[kavin-90]

my jquery ui autocomplete code for reference

$j = jQuery;
$j(function() {
    var cache = {},
            lastXhr;
    $j("#search").autocomplete({
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }
            lastXhr = $j.post(ajax_path, request, function (data, status, xhr) {
                cache[term] = data;
                if (xhr === lastXhr) {
                    response(data);
                }
            },"json");
        },
        minLength: 1,
        focus: function (event, ui) {
            event.preventDefault();
            return false;
        },
        position: {
            offset: "0 5"
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        var term = this.term.split(' ').join('|');
        var re = new RegExp("(" + term + ")", "gi");
        var t = item.title.replace(re, "<u>$1</u>");
        var author = item.author;
        if (author != '') {
            t += '<span class="s"> by ' + author + "</span>";
        }

        var slug = '/' + item.slug + '/';

        var cover = "/thumb.php?slug=" + item.slug;

        var error_img = img_url + '/no_preview.jpg';

        return $j("<li />")
                .data("item.autocomplete", item)
                .append("<a href=" + base_url + slug +" ><img src='" + cover + "' onerror=\"this.src ='" + error_img + "';\"/><div>" + t + "</div><div class='s'>"+ item.cat +"</div></a>")
                .appendTo(ul);
    };
    $j("#search").focus(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
            this.style.color = '#333';
        }
        if (this.value.length > 0) $j('.ui-autocomplete').show();
    });
    $j("#search").focusout(function () {
        if (this.value == '') {
            this.value = this.defaultValue;
            this.style.color = '#909090';
        }
    });
});

[running-coder]

cool, ty @kavin-90.FYI you can have synthax highlight for your pasted code using "```javascript", I've adjusted your previous comment.

[kavin-90]

Thanks @running-coder

here is main part of it
setup cache
var cache = {},

check if cache results exists

if (term in cache) {
response(cache[term]);
return;
}

cache[term] = data; for saving results in cache

[dokudoki]

@kavin-90

Or you could use my solution to cache.

source: {
	titles: {
		data: function() {
		  	var deferred = $.Deferred();

        	       // Cache stuff here
		  	$.post('/v1/search', {q: this.rawQuery}, function(data) {
 
	        	deferred.resolve(data)
		  	});

		    return deferred;
		}
    }
},

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.