[英]How to debounce ajax requests in typeahead.js
I am using twitter typeahead library to implement searching functionality.我正在使用 twitter typeahead 库来实现搜索功能。
I found the approach of sending POST request through ajax in typeahead.我在 typeahead 中找到了通过 ajax 发送 POST 请求的方法。
Problem is : It is firing requests for every word I type no matter how fast or slow and on backspaces too.问题是:无论多快或多慢以及退格键,它都会对我输入的每个单词发出请求。
Here is my code snippet:这是我的代码片段:
$('.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',
});
I tried:我试过了:
Using lodash library's debounce in source like this, but it is not sending any ajax requests.像这样在源代码中使用 lodash 库的去抖动,但它没有发送任何 ajax 请求。
Code snippet:代码片段:
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',
});
Can anyone help how to solve this?谁能帮助解决这个问题? I tried seeing similar posts on stack overflow but couldn't find any solution.
我尝试在堆栈溢出上看到类似的帖子,但找不到任何解决方案。
I managed to solve this problem by using Bloodhound.我设法通过使用 Bloodhound 解决了这个问题。
Result data is in format:结果数据格式:
{status: "success", skills: ["coding", "coding theory"]}
Code Snippet:代码片段:
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
}))
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.