附加搜索词时，如何重用jquery-ui-autocomplete缓存的结果? [英] How to reuse jquery-ui-autocomplete cached results when appending search term?

问题描述

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

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.

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

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".

我走了一条手动查找"ab"搜索结果的路径，使用正则表达式过滤它们以选择"abc"子集，但这似乎完全是我在重新发明轮子.告诉小部件使用"ab"结果，但将其过滤为"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);
                    }
            });
    });
}

推荐答案

这是我的强力发明轮子"的方法，目前看来，它是正确的解决方案.

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

这篇关于附加搜索词时，如何重用jquery-ui-autocomplete缓存的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！