使用 ajax 键入时进行 jQuery 搜索
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10318575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery search as you type with ajax
提问by Damien
i'm trying to create a search where you input text into a textfield and onkeyup it will fire a function off that will send the value of the field to a page and return the results to the div container. The problem i'm having is that when someone is typing, there is a horrible lag going on. I think what's going on is that it's trying to search each letter typed in and does each request. How do i make it so that if i type into the box, wait 1/2 a second (500), if nothing is typed in, then do the ajax search,but if in that time frame another letter comes up, don't even bother with the ajax request. I've been busting my head on this and can't figure it out. All help is appreciated!
我正在尝试创建一个搜索，您将文本输入到文本字段中，并且 onkeyup 它将触发一个函数，该函数将字段的值发送到页面并将结果返回到 div 容器。我遇到的问题是，当有人打字时，会出现可怕的延迟。我认为正在发生的事情是它试图搜索输入的每个字母并执行每个请求。我如何做到这样，如果我在框中输入，等待 1/2 秒（500），如果没有输入任何内容，然后进行 ajax 搜索，但如果在那个时间范围内出现另一个字母，请不要甚至打扰 ajax 请求。我一直在思考这个问题，无法弄清楚。感谢所有帮助！
// fired off on keyup
function findMember(s) {
if(s.length>=3)
$('#searchResults').load('/search.asp?s='+s);
}
回答by Dominic
What this will do is clear the timeout on each press, so if 1/2 second hasn't passed the func wont be executed, then set a timer for 500ms again. Thats it, no need to load a big library..
这将做的是清除每次按下时的超时，所以如果 1/2 秒没有过去，func 将不会被执行，然后再次设置一个 500 毫秒的计时器。就是这样，不需要加载一个大图书馆..
$(document).ready(function() {
var timeoutID = null;
function findMember(str) {
console.log('search: ' + str);
}
$('#target').keyup(function(e) {
clearTimeout(timeoutID);
//timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500);
timeoutID = setTimeout(() => findMember(e.target.value), 500);
});
});
回答by Denys Séguret
The jquery ui autocomplete has this feature.
jquery ui 自动完成功能具有此功能。
http://jqueryui.com/demos/autocomplete/
http://jqueryui.com/demos/autocomplete/
If you don't want to use jquery ui, then look at their source code.
如果你不想使用 jquery ui，那么看看他们的源代码。
回答by Mayur Narula
function myFunction(inputText) {
debugger;
var inputText = document.myForm.textBox.value;
var words = new Array();
var suggestions = "Always", "azulejo", "to", "change", "an", "azo", "compound", "third"];
if (inputText != "") {
for (var i = 0; i < suggestions.length; ++i) {
var j = -1;
var correct = 1;
while (correct == 1 && ++j < inputText.length) {
if (suggestions[i].toUpperCase().charAt(j) != inputText.toUpperCase().charAt(j)) correct = 0;
}
if (correct == 1) words[words.length] = suggestions[i];
document.getElementById("span1").innerHTML = words;
}
}
else {
document.getElementById("span1").innerHTML = "";
}
<p id="demo"></p>
<form name="myForm">
<input type="text" name="textBox" onkeyup="myFunction()"/>
<span id="span1"></span>
</form>
