如何在 typeahead.js 中消除 ajax 请求

Question

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

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

问题是：它会触发我输入的每个单词的请求，无论多快或多慢以及退格键。

这是我的代码片段：

$('.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 库的去抖动，但它没有发送任何 ajax 请求。

代码片段：

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',
});

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

Answer 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
        }))
    },    
});

如何在 typeahead.js 中消除 ajax 请求

How to debounce ajax requests in typeahead.js

javascript

lodash

typeahead.js

twitter-typeahead