多个自动完成调用- jQuery

bcs8qyzn  于 2022-12-18  发布在  jQuery
关注(0)|答案(4)|浏览(133)

我正在查看jQuery UI自动完成文档,并查看他们的回调缓存示例:

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                }
            });
        }
    });
});

代码连接一个字段以使用自动完成,并存储一个已经命中的查询的缓存,使用下面的代码行,这样如果一个查询比另一个查询花费的时间长,它不会替换自动完成的值:

if(xhr === lastXhr) {
    response(data);
}

如果我开始键入几个字母,它就会转到服务器查询数据,然后我暂停并重新开始键入,**如果第一个查询在第二个查询之后完成,则加载图标永远不会消失。**我认为这是因为它永远不会调用response()回调。有没有一种方法可以取消第一个请求后,第二个请求作出?

5lhxktic

5lhxktic1#

你能在发帖前添加lastXhr.abort()吗?这将在你每次开始一个新的请求时取消以前的请求。

$(function() {
    var cache = {}, lastXhr;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            // Abort previous access if one is defined
            if (typeof lastXhr !== 'undefined' && lastXhr.hasOwnProperty("abort")) {
                lastXhr.abort();
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                    // Set to undefined, we are done:
                    // helps when deciding to abort
                    lastXhr = undefined;
                }
            });
        }
    });
});
6tr1vspr

6tr1vspr2#

将最终结果与请求沿着缓存,这样就可以确保每次都调用响应回调,并且lastData将确保使用正确的数据,而不管查询返回时是否不同步。
例如:

$(function() {
    var cache = {}, lastXhr,lastData;

    $('#Field').autocomplete({
        minLength: 2,
        delay: 600,
        source: function(request, response) {
            var term = request.term;

            if( term in cache ) {
                response(cache[term]);
                return;
            }

            lastXhr = $.post('LoadData', function(data, status, xhr) {
                cache[term] = data;

                if(xhr === lastXhr) {
                    response(data);
                    // Store the latest data
                    lastData = data;

                }
                else
                {
                    // Queries have come back out of sync - this isn't the last one
                    // but we need to call response to stop the spinner
                    response(lastData);
                }
            });
        }
    });
 });
a0zr77ik

a0zr77ik3#

我只会说:

if(xhr === lastXhr) {
    response(data);
} else {
    return false;
}
n53p2ov0

n53p2ov04#

您可以确保autocomplete只处理最后一个响应,方法是在响应中包含搜索字符串,并使用matchResponseProperty告诉autocomplete保存搜索字符串的json响应属性的名称。http://easyautocomplete.com/guide#sec-async

相关问题