javascript - 快速按下输入键

Question

我正在搜索大约 5000 条记录。搜索按钮工作正常。但是当我按回车键时太快了。它不会带回结果。我已经尝试了来自 stckoverflow.com 的代码，但它对我不起作用。

我的搜索文本框是

<input name="search_value" id="country_name"   onkeyup="Javascript: if (event.keyCode == 13) return false; searchFilter();"  />

用于 searchfilter() 的 Javascript

function searchFilter()
{
    //alert("");
    $("#loader").show();
    var search_variable = $("#search_variable").val();
    var search_value = $("#country_name").val();
    //alert(search_value);
    $.ajax({
        url: 'searchorder.php?act=save&search_variable=' + search_variable + '&search_value=' + search_value,
        success: function(data) {
            //alert(data);
            $("#loader").hide();
            $(".contentText").html(data);
            // $("#feedbackcommon"+act_id).show();
        }
    });
}

HTML

<form method="post" name="searchform"><?php echo SEARCH_TITLE; ?>
    <label for="select"></label>
    <select name="search_variable" id="search_variable" onchange="checkvalue(this.value)" >
        <option value="rfq_id"><?php echo ORDER_ID; ?></option> 
        <option value="po_no"><?php echo PO_NO; ?></option>
        <option value="issue_no"><?php echo ISSUE_NO; ?></option>
        <option value="serial"><?php echo SERIAL_NO; ?></option>
        <option value="customers_firstname"><?php echo NAME_STORE; ?></option>
        
    </select>

    <input name="search_value" id="country_name"   onkeyup="Javascript: if (event.keyCode == 13) 
                searchFilter(); "  />
   
    <input type="button" name="Button" id="button" value="<?php echo SEARCH_BUTTON; ?>" class="myButton" onclick="searchFilter();" />
    <a href="allorders.php"><input type="button" name="button2" id="button2" value="<?php echo CLEAR_BUTTON; ?>" class="myButton" /></a>
    <div id="loader"><img src="images/opc-ajax-loader.gif" /></div>
</form>

Answer 1

你需要像这样使用“ promise 超时”:

var searchTimer  = null;
var searchInput  = $('#country_name');
var searchResult = $('.contentText');

searchInput.on('keyup', function() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(function() {
        var val = $.trim(searchInput.val());
        if (val) {
            $.ajax({
                url: 'searchorder.php?search_value=' + val,
                cache: false, // deny cache GET requests
                success: function(data) {
                    searchResult.html(data);
                }
            });
        }
    }, 300);
});