Javascript 如何使用 jquery 实现 ajax 搜索 onkeyup
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5637013/
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
How to bring ajax search onkeyup with jquery
提问by Mohan Ram
My Script to call ajax
我的脚本调用ajax
<script language="javascript">
function search_func(value)
{
$.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg){
//Receiving the result of search here
}
});
}
</script>
HTML
HTML
<input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);">
Question:while onkeyup I am using ajax to fetch the result. Once ajax result delay increases problem occurs for me.
问题：在 onkeyup 时，我使用 ajax 来获取结果。一旦ajax结果延迟增加，我就会出现问题。
For ExampleWhile typing tkeyword I receive ajax result and while typing teI receive ajax result
when ajax time delay between two keyup sometime makes a serious issue.
例如，在键入t关键字时，我收到 ajax 结果，而在键入te时，当两个 keyup 之间的 ajax 时间延迟有时会导致严重问题时，我会收到 ajax 结果。
When I type tefastly. ajax search for tkeyword come late, when compare to te. I don't know how to handle this type of cases.
当我te快速打字时。ajax 搜索t关键字来晚了，与te. 我不知道如何处理此类案件。
ResultWhile typing tekeyword fastly due to ajax delays. result for tkeyword comes.
结果te由于 ajax 延迟
而快速键入关键字。t关键字的结果来了。
I believe I had explained up to reader knowledge.
我相信我已经解释了读者的知识。
回答by Void
You should check if the value has changed over time:
您应该检查该值是否随时间发生变化：
var searchRequest = null;
$(function () {
var minlength = 3;
$("#sample_search").keyup(function () {
var that = this,
value = $(this).val();
if (value.length >= minlength ) {
if (searchRequest != null)
searchRequest.abort();
searchRequest = $.ajax({
type: "GET",
url: "sample.php",
data: {
'search_keyword' : value
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
//Receiving the result of search here
}
}
});
}
});
});
EDIT:
编辑：
The searchRequestvariable was added to prevent multiple unnecessary requests to the server.
searchRequest添加该变量是为了防止对服务器的多个不必要的请求。
回答by DavidGouge
Keep hold of the XMLHttpRequestobject that $.ajax()returns and then on the next keyup, call .abort(). That should kill the previous ajax request and let you do the new one.
保持返回的XMLHttpRequest对象，$.ajax()然后在下一个键上，调用 .abort()。这应该会终止之前的 ajax 请求并让您执行新的请求。
var req = null;
function search_func(value)
{
if (req != null) req.abort();
req = $.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg){
//Receiving the result of search here
}
});
}
回答by Thomas Li
Try using the jQuery UI autocomplete. Saves you from many low-level coding.
尝试使用jQuery UI 自动完成功能。使您免于进行许多低级编码。
回答by jimy
First i will suggest that making a ajax call on every keyup is not good (and this why u run in this problem) .
首先，我会建议在每个 keyup 上进行 ajax 调用并不好（这也是你遇到这个问题的原因）。
Second if you want to use keyup then show a loading image after input box to show user its still loading (use loading image like you get on adding comment)
其次，如果您想使用 keyup，则在输入框后显示加载图像以向用户显示其仍在加载（使用加载图像，就像添加评论一样）
回答by Alex
Couple of pointers. Firstly, language is a deprecated attribute of javascript. In HTML(5) you can leave the attribute off, or use type="text/javascript". Secondly, you are using jQuery so why do you have an inline function call when you can do that with jQuery too?
几个指针。首先，语言是 javascript 不推荐使用的属性。在 HTML(5) 中，您可以关闭该属性，或使用 type="text/javascript"。其次，您使用的是 jQuery，那么当您也可以使用 jQuery 进行内联函数调用时，为什么还要进行内联函数调用呢？
$(function(){
// Document is ready
$("#sample_search").keyup(function()
{
$.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg)
{
//Receiving the result of search here
}
});
});
});
I would suggest leaving a little delay between the keyup event and calling an ajax function. What you could do is use setTimeout to check that the user has finished typing before then calling your ajax function.
我建议在 keyup 事件和调用 ajax 函数之间留一点延迟。您可以做的是使用 setTimeout 来检查用户在调用 ajax 函数之前是否已完成输入。
