Question

我试图在用户输入时实现Ajax搜索/自动完成。这是我的代码：

$('#productSearch').live('keyup',function(){
    var searchterm = encodeURIComponent($('#productSearch').val());
    $('.ajax-search-results').load('/ajax/search.php?type=product&s=' + searchterm);

});

问题是结果与输入值不一致，我不知道为什么，但是当我输入太快时（太快处理.load（）可能？）结果结果不一致（不是我所期待的）如果我慢慢输入，它会完美地运作。

有人可以告诉我怎样才能解决这种情况？

我想到在加载完成之前禁用功能，但这也意味着我将失去用户输入的内容，直到操作完成为止？

Answer 1

这通常通过一个小的超时来修复，以便不会在彼此之间堆叠请求，并且当用户快速键入时为每个键执行ajax，并且如果执行常规$ .ajax调用则中止先前的调用（不是这样）容易abort() XHR with load（））：

var timer;

$(document).on('keyup', '#productSearch',function(){
    clearTimeout(timer);
    timer = setTimeout(function() {
        var searchterm = encodeURIComponent($('#productSearch').val());
        $('.ajax-search-results').load('/ajax/search.php?type=product&s=' + searchterm);
    }, 300);
});

当用户在输入字段中键入时，通过AJAX连续加载结果

1 个答案: