防止在 keyup 上提交许多请求时自动完成

Question

我有以下代码：

@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 被触发了很多次，我需要找到一种方法来防止它在每次按键时都触发那么多

有什么建议和帮助吗？

Answer 1

如果结果不同，那么你可以在例程中做的是在发送请求时，捕获最后发送的某处的内容，例如数据属性：

elem.data("last-sent", value);

然后在发出请求之前检查此属性以确保它们不同。

if (elem.data("last-sent") == value) {
   return; //exit due to the same value being the last value
}

一些自动完成控件在开始之前延迟输入一定数量的字符；这可能是您的另一种选择。

Answer 2

使用以下技巧，每当用户停止写入时，Javascript 将等待几秒钟再触发请求，只需使用以下代码：

let input = document.getElementById('txtsearch');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        InitSearch();
    }, 1000);
});

防止在 keyup 上提交许多请求时自动完成

preventing autocomplete on submitting many requests on keyup

javascript

ajax

asp.net-mvc

search

autocomplete