jquery - jQuery 搜索框，搜索结果与输入不匹配

Question

首先，这个标题是我能想到的最好的标题。

我编写了一个非常短的小脚本来执行实时搜索。

它的基本原理是:

(function ($) {
    $.fn.SearchThing = function (options) {
        options = $.extend({
            MaxCount: 5,
            inputField: '#search_input',
            sugestBox: '#search_sugest'
        }, options);

        var input = $(options.inputField);
        var sugest = $(options.sugestBox);
        sugest.hide();

        input.keyup(function (e) {
            switch (e.keyCode) {
                //Other keys.
                default:
                    queryServer(this.value);
            }
        });

        function queryServer(value) {
            var url = "/search/get?query=" + value; // value;
            $.getJSON(url, function (result) {
                if (result.Results < 1) {
                    sugest.hide();
                    return;
                }

                sugest.children().each(function (idx, itm) {
                    $(itm).remove();
                });
                sugest.show();

                //Build box.
            }
        };
    };
})(jQuery);

这几乎可以正常工作。但有两件事需要改进。一个并不是那么重要，另一个实际上是一个错误，但可能会被另一个解决，我不知道。但它们在这里:

BUG:结果并不总是与“输入字段”中的内容匹配

这意味着，如果我输入“ASD”，它会搜索“ASD”，所以如果我说输入“ASD”，然后快速“退格”，它应该搜索“AS”，但是时不时地似乎最终得到了“ASD”的结果。

我知道这一点是因为我目前尚未实现搜索后端，因此我返回一个静态列表，其中第一个元素是搜索词。

我认为这可能是因为搜索“AS”比搜索“ASD”返回得更快，因此结果按顺序应用 ->“A”、“AS”、“AS”、“ASD”应按“A”、“AS”、“ASD”、“AS”顺序应用它们......

如果我输入“ASD”，它也会按顺序应用它 ->“A”、“ASD”、“AS”。 (同样的事情发生，搜索“ASD”在搜索“AS”之前返回)

注意:像“ASD”这样的简短搜索词很少会触发此错误，打字速度越快的较长搜索词更有可能触发此错误，我在这里使用了简短的搜索词来进行描述问题变得更容易解决。

谁能提出一个好的解决方案吗？

期望:提交搜索之前有一个小延迟，如果击键速度很快，则仅处理最后一个“值”。

这实际上可能会解决上述问题，我认为实际上很有可能这样做。

我很快就看到了“延迟”，但由于它无法“取消”执行(据我所知)，因此我认为它需要分配实现，但也许有人有一个绝妙的主意那部分。

否则有人对如何做到这一点有任何其他想法吗？

Answer 1

所有这一切的原因是请求-响应比下一次按键花费的时间更长，因此会显示之前的结果。

我认为你应该能够用一个技巧解决这两个“问题”:

var delayTime = 500;
var lastTimeout = null;
var input = $(options.inputField);
var sugest = $(options.sugestBox);
sugest.hide();

input.keyup(function (e) {
    switch (e.keyCode) {
        //Other keys.
        default:
            if (lastTimeout != null) {
                clearTimeout(lastTimeout);
            }
            lastTimeout = setTimeout('queryServer("'+this.value+'")', delayTime);
    }
});

function queryServer(value) {
    lastTimeout = null;
    // ... all the rest as before ...
};

这将在您停止输入(或暂停这么长时间)后仅 0.5 秒显示建议。