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

【问题标题】：preventing autocomplete on submitting many requests on keyup防止在 keyup 上提交许多请求时自动完成
【发布时间】：2020-09-21 22:16:18
【问题描述】：

我有以下代码：

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

有什么建议和帮助吗？

【问题讨论】：

标签： javascript ajax asp.net-mvc search autocomplete

【解决方案1】：

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

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

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

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

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

【讨论】：

但你的意思是延迟吗？我该如何实现呢？
例如，检查输入了多少个字符，并且只有在达到该字符数或更多时才开始将值发送到服务器（例如，在 3 号开始执行自动完成或输入更多字符）是一种方法。另一种方法是，一旦您准备好向服务器发送响应，添加 250 毫秒的延迟；如果值已更改，则取消该请求并启动一个新请求...这可能是 setTimeout 和 clearTimeout 的组合，但可能有更有效的方法。

【解决方案2】：

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

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

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

【讨论】：