jQuery UI自动完成:中止请求。

I'm using the callback version of the source option which performs an ajax request. I figure if a user types a bunch of letters in rapid succession before an ajax request completes, we should abort the old one and only use the new one. I'm assuming the URL version for the source parameter would do this automatically, but since I'm using a custom callback, I'd have to do that manually.

我正在使用源选项的回调版本，该选项执行ajax请求。我认为，如果用户在ajax请求完成之前连续快速输入一堆字母，我们应该放弃旧的，只使用新的。我假设源参数的URL版本会自动执行此操作，但是由于我使用自定义回调，所以必须手动执行。

So here's what I've got:

我得到的是:

$('#myselector').autocomplete({
    source: function(request, response) {
        var data = {};
        if($(this).data('xhr')) {
            console.log('aborting...');
            $(this).data('xhr').abort();
        }
        // *snip* add some stuff to data
        $(this).data('xhr', $.ajax({
            url: '/ajax/major_city',
            dataType: 'json',
            data: data,
            success: function(data, textStatus, $xhr) {
                response(data);
            },
            complete: function($xhr, textStatus) {
                console.log(textStatus);
                if(textStatus === 'abort') {
                    console.log('aborted!');
                    response([]);
                }
            }
        }));
    },
// ....

So, whenever the "source" callback is triggered, it checks if the XHR element exists for that input (will be undefined the first time), and if so, aborts it (side question: how can I check if the request is complete? No sense trying abort requests that have already completed).

因此，无论何时触发“源”回调，它都会检查该输入是否存在XHR元素(第一次将是未定义的)，如果存在，则中止它(另一个问题:如何检查请求是否已完成?尝试中止已经完成的请求是没有意义的)。

But the docs say:

但医生说:

It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

当提供自定义源回调来处理请求期间的错误时，这一点很重要。即使遇到错误，也必须始终调用响应回调。这确保小部件始终具有正确的状态。

So, towards the bottom of my code you'll see that I (attempt to) check if the request has been aborted, and if so, I return an empty list. But that "aborted!" log never seems to be called. It always says "success" even when it gets aborted. Why's that?

因此，在我的代码的底部，您将看到我(试图)检查请求是否被中止，如果是，我返回一个空列表。但是“中止!”日志似乎永远不会被调用。它总是说“成功”，即使它被中止。为什么?

---

Edit: Just tried outputting $(this).data('xhr').readyState. It never seems to be less than 4 which suggests to me that source isn't called again until the last request returns a response. Which is a shame, because we could abort the requests early and speed up the response time a bit...

编辑:尝试输出$(this).data('xhr'). readystate。它似乎从不小于4，这对我来说意味着直到最后一个请求返回响应时才再次调用源。这是一个遗憾，因为我们可以提前中止请求并加快响应时间……

2 个解决方案

#1

bdparrish has the right idea

Increase the time the plugin waits before sending the request:

在发送请求之前增加插件的等待时间:

$( ".selector" ).autocomplete({ delay: 500 }); //default is 300

This way you will only send the request once you suspect the user has finished typing. It's better to make less http requests than make many and cancel them.

这样，当您怀疑用户已经完成输入时，您才会发送请求。少发出http请求比发出很多请求并取消它们要好。

-Lededje

-Lededje

#2

Is there a reason that you can't set the time interval to wait for the user to "seem" like they are finished typing? The 'delay' option sets the milliseconds that it will wait after the last letter is typed before searching.

有什么原因让你不能设置时间间隔来等待用户“看起来”他们已经完成了输入?“延迟”选项设置在搜索前输入最后一个字母后等待的毫秒数。

Also, the response would still be a success even if you return 'abort' from the server. because the request did not error out on the server. you return the value 'abort' i am assuming.

而且，即使从服务器返回“abort”，响应仍然是成功的。因为请求在服务器上没有出错。你返回我假设的值‘abort’。