Question

我有以下kludgey代码;

HTML

<input type="search" id="search_box" />
<div id="search_results"></div>

JS

var search_timeout,
    search_xhr;
$("#search_box").bind("textchange", function(){
    clearTimeout(search_timeout); search_xhr.abort();
    search_term = $(this).val();
    search_results = $("#search_results");

    if(search_term == "") {
        if(search_results.is(":visible"))
            search_results.stop().hide("blind", 200);
    } else {
        if(search_results.is(":hidden"))
            search_results.stop().show("blind", 200);
    }

    search_timeout = setTimeout(function () {
        search_xhr = $.post("search.php", {
            q: search_term
        }, function(data){
            search_results.html(data);
        });
    }, 100);
});

（使用textchange plugin by Zurb）

我使用原始更简单的代码时遇到的问题是它非常无法响应。结果将在几秒钟后出现，特别是当输入速度较慢或使用Backspace等时

我做了这一切，情况并没有好多少。请求堆积起来。

我的初衷是使用.abort()取消之前仍在运行的任何请求，因为textchange事件再次被触发（根据446594）。这不起作用，因为我在控制台中反复出现这样的错误;

Uncaught TypeError: Cannot call method 'abort' of undefined

如何让.abort()在我的案件中工作？

此外，这种方法是获取“实时”搜索结果的最佳方式吗？就像Facebook的搜索栏一样，它会根据用户的类型给出结果，并且似乎很快就会出现。

Answer 1

在发送请求之前，你应该稍微延迟一下。如果用户在最后一个100毫秒内（或您选择的其他时间）点击另一个密钥，则无需首先发送请求。

实际发送请求时，您应该检查是否已经有效。如果是，请取消它。

e.g。

if (search_xhr) {
   search_xhr.abort();
}

不要忘记在成功检索时重置该var。例如删除search_xhr;

中止$ .post（）/响应式搜索结果

1 个答案: