取消Twitter typeahead.js中待定的bloodhound请求

3

我已经配置了像这样的Twitter typeahead.js:

var filteredSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '@Url.Action("Get", "Search")/',
        prepare: function (query, settings) {
            settings.url = settings.url + $('#filter-select').val() + '?q=' + encodeURIComponent(query);
            return settings;
        },
        rateLimitBy: 'throttle',
        rateLimitWait: 800
    }
});

$('#search').typeahead({
    hint: false,
    highlight: true,
    minLength: 3
}, {
    name: 'filtered-source',
    display: 'value',
    limit: 50,
    source: filteredSource,
    templates: {
        empty: [
            '<div>',
            '&nbsp;&nbsp;Unable to find any results.',
            '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile(templateData)
    }
});

当用户进行搜索并开始输入类似于"key"的内容并暂停时,Bloodhound会向服务器发送一个搜索请求。当用户添加更多字母到输入框后,例如"keyword",另一个搜索将被发送到服务器。
但是,挂起的请求"key"首先需要等待浏览器完成,然后服务器才处理第二个请求,并且仅在完成后才显示结果。因此,在用户看到任何结果之前可能需要很长时间。
是否有一种方法可以通过Bloodhound取消挂起的请求,当关键字被更改时?
1个回答

2
您可以像这样使用abort()函数:
var lastSearch;
var filteredSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '@Url.Action("Get", "Search")/',
        prepare: function (query, settings) {
            settings.url = settings.url + $('#filter-select').val() + '?q=' + encodeURIComponent(query); 
            settings.beforeSend = function(e) {
                if (lastSearch) {
                     lastSearch.abort();
                }
                lastSearch = e;
            };
            return settings;
        },
        rateLimitBy: 'throttle',
        rateLimitWait: 800
    }
});

这将取消最近一次的AJAX请求,但需要注意的是,中止函数并不总是能够阻止请求到达服务器。如果在调用abort()之前请求已经到达服务器,服务器可能会继续处理该请求。


谢谢,这帮了我很大的忙。为了我的目的,我不得不在settings.url中添加缓存破坏参数,这样Bloodhound就不会取消传输。 - strictlyk3v

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接