当用户在文本框中输入完成时，我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数，因为这会导致大量的ajax请求，但我也不希望他们不得不按回车键。
是否有一种方法，让我可以检测当用户已经完成输入，然后做ajax请求?
在这里使用jQuery !
当前回答
我不认为keyDown事件在这种情况下是必要的(如果我错了，请告诉我为什么)。在我的(非jquery)脚本类似的解决方案看起来像这样:
var _timer, _timeOut = 2000;
function _onKeyUp(e) {
clearTimeout(_timer);
if (e.keyCode == 13) { // close on ENTER key
_onCloseClick();
} else { // send xhr requests
_timer = window.setTimeout(function() {
_onInputChange();
}, _timeOut)
}
}
这是我在Stack Overflow上的第一个回复，所以我希望有一天这能帮助到别人:)
其他回答
如果你需要等待，直到用户完成输入使用简单的这个:
$(document).on('change','#PageSize', function () {
//Do something after new value in #PageSize
});
使用ajax调用的完整示例-这适用于我的寻呼机-每个列表的项目计数:
$(document).ready(function () {
$(document).on('change','#PageSize', function (e) {
e.preventDefault();
var page = 1;
var pagesize = $("#PageSize").val();
var q = $("#q").val();
$.ajax({
url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
data: { q: q, pagesize: pagesize, page: page },
type: 'post',
datatype: "json",
success: function (data) {
$('#tablecontainer').html(data);
// toastr.success('Pager has been changed', "Success!");
},
error: function (jqXHR, exception) {
ShowErrorMessage(jqXHR, exception);
}
});
});
});
是的，你可以在每个key up事件上设置一个超时，比如2秒，它会触发一个ajax请求。您还可以存储XHR方法，并在随后的按键事件中中止它，这样可以节省更多的带宽。下面是我为自己的自动完成脚本写的一些东西。
var timer;
var x;
$(".some-input").keyup(function () {
if (x) { x.abort() } // If there is an existing XHR, abort it.
clearTimeout(timer); // Clear the timer so we don't end up with dupes.
timer = setTimeout(function() { // assign timer a new timeout
x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
}, 2000); // 2000ms delay, tweak for faster/slower
});
希望这能有所帮助，
马可
var timer;
var timeout = 1000;
$('#in').keyup(function(){
clearTimeout(timer);
if ($('#in').val) {
timer = setTimeout(function(){
//do stuff here e.g ajax call etc....
var v = $("#in").val();
$("#out").html(v);
}, timeout);
}
});
完整的例子:http://jsfiddle.net/ZYXp4/8/
上面选择的答案不成立。
因为typingTimer偶尔会设置多次(对于快速键入者，按下键之前按下键两次)，那么它就不能正确清除。
下面的解决方案解决了这个问题，并将在完成OP请求后调用X秒。它也不再需要冗余的keydown函数。我还添加了一个检查，这样如果输入为空，函数调用就不会发生。
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms (5 seconds)
//on keyup, start the countdown
$('#myInput').keyup(function(){
clearTimeout(typingTimer);
if ($('#myInput').val()) {
typingTimer = setTimeout(doneTyping, doneTypingInterval);
}
});
//user is "finished typing," do something
function doneTyping () {
//do something
}
和相同的代码在普通JavaScript解决方案:
//setup before functions
let typingTimer; //timer identifier
let doneTypingInterval = 5000; //time in ms (5 seconds)
let myInput = document.getElementById('myInput');
//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
clearTimeout(typingTimer);
if (myInput.value) {
typingTimer = setTimeout(doneTyping, doneTypingInterval);
}
});
//user is "finished typing," do something
function doneTyping () {
//do something
}
这个解决方案确实使用了ES6，但在这里没有必要。只需将let替换为var，将箭头函数替换为常规函数。
对于alpine.js用户<input @input.debounce.500ms="fn()" >
