防止在 keyup 上提交许多请求时自动完成
preventing autocomplete on submitting many requests on keyup
我有以下代码:
@using (Html.BeginForm("Search", "Home", FormMethod.Get,new { id="searchform",@onsubmit="seachformsubmit(event);" }))
{
<div class="searchTop">
<div class="searchField posRelative">
<input type="text" name="search" data-resultslimit="12" data-url="@Url.Content("~/Home/_AutoSuggestSearchResult")" placeholder="Search products..." id="txtsearch" onkeyup="onsearchkeyup(this);" />
<span id="spsearcherror" class="errormsgsearch" style="display:none">At least 3 characters...</span>
</div>
<div class="searchAction blackBtn"><a href="javascript:;" onclick="searchsubmit(event);">View Results</a></div>
<div class="clearBoth"></div>
</div>
}
Javascript
function onsearchkeyup(sender) {
$("#spsearcherror").hide();
var vle = $(sender).val();
if (vle != "") {
if (vle.length < 3) {
$("#spsearcherror").show();
}
else {
InitSearch();
}
}
}
function InitSearch() {
var elem = $("#txtsearch");
$.ajax({
type: "POST",
url: elem.data("url"),
data: AddFormAntiForgeryToken({ 'keyword': elem.val(), 'recordsLimit': elem.data("resultslimit") }),
dataType: 'json',
beforeSend: function () {
$(".searchresult.ajaxloader").show();
},
success: function (data) {
$(".searchresult.ajaxloader").hide();
$("#ulsearch").html(data.html);
setTimeout(function () {
pushBlockCarousel();
matchHeightfnct();
}, 300);
}
});
}
我的问题是 _AutoSuggestSearchResult
被触发了很多次,我需要找到一种方法来防止它在每次按键时都触发那么多
有什么建议和帮助吗?
如果结果不同,那么你可以在例程中做的是在发送请求时,捕获最后发送的某处的内容,例如数据属性:
elem.data("last-sent", value);
然后在发出请求之前检查此属性以确保它们不同。
if (elem.data("last-sent") == value) {
return; //exit due to the same value being the last value
}
一些自动完成控件在开始之前延迟输入一定数量的字符;这可能是您的另一种选择。
使用以下技巧,每当用户停止写入时,Javascript 将等待几秒钟再触发请求,只需使用以下代码:
let input = document.getElementById('txtsearch');
let timeout = null;
input.addEventListener('keyup', function (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
InitSearch();
}, 1000);
});
我有以下代码:
@using (Html.BeginForm("Search", "Home", FormMethod.Get,new { id="searchform",@onsubmit="seachformsubmit(event);" }))
{
<div class="searchTop">
<div class="searchField posRelative">
<input type="text" name="search" data-resultslimit="12" data-url="@Url.Content("~/Home/_AutoSuggestSearchResult")" placeholder="Search products..." id="txtsearch" onkeyup="onsearchkeyup(this);" />
<span id="spsearcherror" class="errormsgsearch" style="display:none">At least 3 characters...</span>
</div>
<div class="searchAction blackBtn"><a href="javascript:;" onclick="searchsubmit(event);">View Results</a></div>
<div class="clearBoth"></div>
</div>
}
Javascript
function onsearchkeyup(sender) {
$("#spsearcherror").hide();
var vle = $(sender).val();
if (vle != "") {
if (vle.length < 3) {
$("#spsearcherror").show();
}
else {
InitSearch();
}
}
}
function InitSearch() {
var elem = $("#txtsearch");
$.ajax({
type: "POST",
url: elem.data("url"),
data: AddFormAntiForgeryToken({ 'keyword': elem.val(), 'recordsLimit': elem.data("resultslimit") }),
dataType: 'json',
beforeSend: function () {
$(".searchresult.ajaxloader").show();
},
success: function (data) {
$(".searchresult.ajaxloader").hide();
$("#ulsearch").html(data.html);
setTimeout(function () {
pushBlockCarousel();
matchHeightfnct();
}, 300);
}
});
}
我的问题是 _AutoSuggestSearchResult
被触发了很多次,我需要找到一种方法来防止它在每次按键时都触发那么多
有什么建议和帮助吗?
如果结果不同,那么你可以在例程中做的是在发送请求时,捕获最后发送的某处的内容,例如数据属性:
elem.data("last-sent", value);
然后在发出请求之前检查此属性以确保它们不同。
if (elem.data("last-sent") == value) {
return; //exit due to the same value being the last value
}
一些自动完成控件在开始之前延迟输入一定数量的字符;这可能是您的另一种选择。
使用以下技巧,每当用户停止写入时,Javascript 将等待几秒钟再触发请求,只需使用以下代码:
let input = document.getElementById('txtsearch');
let timeout = null;
input.addEventListener('keyup', function (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
InitSearch();
}, 1000);
});