jquery-ui-autocomplete - 附加搜索词时如何重用 jquery-ui-autocomplete 缓存结果？

Question

我有以下 JS 方法将 jQuery UI 自动完成小部件绑定(bind)到搜索文本框。一切工作正常，包括缓存，只是在附加搜索词时进行了不必要的服务器调用，因为我不重复使用刚刚检索的结果。

例如，搜索“ab”会从服务器获取一些结果。在搜索框中的“ab”后面键入“c”将从服务器获取“abc”结果，而不是重用缓存的“ab”结果并忽略与“abc”不匹配的结果。

我沿着手动查找“ab”搜索结果的路径，使用正则表达式过滤它们以选择“abc”子集，但这完全看起来像是我在重新发明轮子。告诉小部件使用“ab”结果，但过滤它们的“abc”术语并重新显示缩短的下拉列表的正确、规范的方法是什么？

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

这是我的“蛮力，重新发明轮子”方法，目前看来是正确的解决方案。

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;
                    }
            });
    });
}