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

我正在使用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',
});

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

我试过：

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

代码段：

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

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

有谁能帮忙解决这个问题吗？

---

我尝试在stack overflow上看到类似的帖子，但找不到任何解决方案。

我通过使用侦探犬解决了这个问题

结果数据的格式为：

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