如何在 typeahead.js 中去抖动 ajax 请求答案

【问题标题】：How to debounce ajax requests in typeahead.js如何在 typeahead.js 中去抖动 ajax 请求
【发布时间】：2021-05-19 11:59:36
【问题描述】：

我正在使用 twitter typeahead 库来实现搜索功能。

我在 typeahead 中找到了通过 ajax 发送 POST 请求的方法。

问题是：它对我输入的每个单词都发出请求，无论多快或多慢，也可以使用退格键。

这是我的代码 sn-p：

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 2,
}, {
    source: function (query, process) {
        return $.ajax({
                url: "Somedomain" + "post/api/skills",
                type: 'post',
                data: { query: query, limit: 15 },
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    var resultList = result.skills.map(function (item) {
                        var aItem = { value: item };
                        return aItem;
                    });

                    process(resultList);
                    return;
                }
            });
    },
    displayKey: 'value',
});

我试过了：

像这样在源代码中使用 lodash 库的 debounce，但它没有发送任何 ajax 请求。

代码sn-p：

function debounceIt(query, process) {
    return $.ajax({
                url: "Somedomain" + "post/api/skills",
                type: 'post',
                data: { query: query, limit: 15 },
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    var resultList = result.skills.map(function (item) {
                        var aItem = { value: item };
                        return aItem;
                    });

                    process(resultList);
                    return;
                }
            });
}

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
}, {
    source: function (query, process) {
        _.debounce(function () {
             debounceIt(query, process);
        }, 300);
    },
    displayKey: 'value',
});

谁能帮助解决这个问题？我尝试在堆栈溢出上看到类似的帖子，但找不到任何解决方案。

【问题讨论】：

标签： javascript lodash typeahead.js twitter-typeahead

【解决方案1】：

我设法通过使用 Bloodhound 解决了这个问题。

结果数据格式：

{status: "success", skills: ["coding", "coding theory"]}

代码片段：

var skills = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value);  },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "Somedomain" + "post/api/skills",
        rateLimitBy: 'debounce',
        rateLimitWait: 500,
        prepare: function (query, settings) {
            settings.type = "POST";
            settings.data = {query: query, limit: 15};
            return settings;
        },
        transform: allSkills => $.map(allSkills.skills, movie => ({
            value: movie
        }))
    },    
});

【讨论】：