How to reuse jquery-ui-autocomplete cached results when appending search term?

Question

I have the following JS method to bind the jQuery UI autocomplete widget to a search text box. Everything works fine, including caching, except that I make unnecessary server calls when appending my search term because I don't reuse the just-retrieved results.

For example, searching for "ab" fetches some results from the server. Typing "c" after "ab" in the search box fetches "abc" results from the server, instead of reusing the cached "ab" results and omitting ones that don't match "abc".

I went down the path of manually looking up the "ab" search results, filtering them using a regex to select the "abc" subset, but this totally seems like I'm reinventing the wheel. What is the proper, canonical way to tell the widget to use the "ab" results, but filter them for the "abc" term and redisplay the shortened dropdown?

function bindSearchForm() {
    "use strict";
    var cache = new Object();

    $('#search_text_field').autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term;
            if (term in cache) {
                response(cache[term]);
                return;
            }
            $.ajax({type: 'POST',
                    dataType: 'json',
                    url: '/get_search_data',
                    data: {q: term},
                    success: function (data) {
                        cache[term] = data;
                        response(data);
                    }
            });
    });
}

Answer 1

Here's my "brute-force, reinventing the wheel" method, which is, for now, looking like the right solution.

function bindSearchForm() {
    "use strict";
    var cache = new Object();
    var terms = new Array();

    function cacheNewTerm(newTerm, results) {
        // maintain a 10-term cache
        if (terms.push(newTerm) > 10) {
            delete cache[terms.shift()];
        }
        cache[newTerm] = results;
    };

    $('#search_text_field').autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = request.term.toLowerCase();
            if (term in cache) {
                response(cache[term]);
                return;
            } else if (terms.length) {
                var lastTerm = terms[terms.length - 1];
                if (term.substring(0, lastTerm.length) === lastTerm) {
                    var results = new Array();
                    for (var i = 0; i < cache[lastTerm].length; i++) {
                        if (cache[lastTerm][i].label.toLowerCase().indexOf(term) !== -1) {
                            results.push(cache[lastTerm][i]);
                        }
                    }
                    response(results);
                    return;
                }
            }
            $.ajax({type: 'POST',
                    dataType: 'json',
                    url: '/get_search_data',
                    data: {q: term},
                    success: function (data) {
                        cacheNewTerm(term, data);
                        response(data);
                        return;
                    }
            });
    });
}

Answer 2

If anyone wants a version that supports multiple entries in the text box then please see below:

$(function () {
function split(val) {
    return val.split(/,\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

var cache = new Object();
var terms = new Array();

function cacheNewTerm(newTerm, results) {
    // keep cache of 10 terms
    if (terms.push(newTerm) > 10) {
        delete cache[terms.shift()];
    }
    cache[newTerm] = results;
}

$("#searchTextField")
    .on("keydown",
        function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).autocomplete("instance").menu.active) {
                event.preventDefault();
            }
        })
    .autocomplete({
        minLength: 2,
        source: function (request, response) {
            var term = extractLast(request.term.toLowerCase());
            if (term in cache) {
                response(cache[term]);
                return;
            } else if (terms.length) {
                var lastTerm = terms[terms.length - 1];
                console.log('LAst Term: ' + lastTerm);
                if (term.substring(0, lastTerm.length) === lastTerm) {
                    var results = new Array();
                    for (var i = 0; i < cache[lastTerm].length; i++) {
                        console.log('Total cache[lastTerm[.length] = ' +
                            cache[lastTerm].length +
                            '....' +
                            i +
                            '-' +
                            lastTerm[i]);
                        console.log('Label-' + cache[lastTerm][i]);
                        var cachedItem = cache[lastTerm][i];
                        if (cachedItem != null) {
                            if (cachedItem.toLowerCase().indexOf(term) !== -1) {
                                results.push(cache[lastTerm][i]);
                            }
                        }
                    }
                    response(results);
                    return;
                }
            }

            $.ajax({
                url: '@Url.Action("GetSearchData", "Home")',
                dataType: "json",
                contentType: 'application/json, charset=utf-8',
                data: {
                    term: extractLast(request.term)
                },
                success: function (data) {
                    cacheNewTerm(term, data);
                    response($.map(data,
                        function (item) {
                            return {
                                label: item
                            };
                        }));
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        },
        search: function () {
            var term = extractLast(this.value);
            if (term.length < 2) {
                return false;
            }
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push(ui.item.value);
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });