快速按下回车键

Question

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

我的搜索文本框是

<input name="search_value" id="country_name"   onkeyup="Javascript: if (event.keyCode == 13) return false; 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

它不应该返回结果，因为您从未启动searchFilter ，如果您使用 enter，您会看到if (event.keyCode == 13) return false;

keyCode 13 == ENTER，这意味着你在searchFilter();之前返回false searchFilter(); 被调用。 去掉if (event.keyCode == 13) return false;

Answer 2

您需要像这样使用“承诺超时”：

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);
});

Answer 3

演示http://jsfiddle.net/togr18Lb/1/

好的，这是您的解决方案。

在发出新请求时中止任何先前的请求，以免它们淹没服务器。

通过等待用户停止输入来减慢请求速度。

该按钮有效，所以我们需要做的就是绑定 keyup 和输入字段的更改来触发该按钮，而不是重复代码。 我们使用 jQuery 来做到这一点，而不是使用onkeyup="" 。

为了确保我们不会在按下 Enter 键时发出不必要的请求返回 false，但我们使用.preventDefault()代替。

<input name="search_value" id="country_name"  />

jQuery

var searchFilterXhr;
var searchTimeout;

$(function(){
    // bind keyup (and change) to trigger the button that causes the search
    $('#country_name').on('keyup change', function(e){
        // prevent any default action, like submitting a form on enter.
        e.preventDefault();
        // if the text field has changed, only then do we search
        if ($(this).data('last-value') != $(this).val()) $('#button').trigger('click');
        // remember the previous value so that we can check it's changed
        $(this).data('last-value', $(this).val());

    });
});

function searchFilter(){
    //alert("");
    $("#loader").show();
    var search_variable = $("#search_variable").val();
    var search_value = $("#country_name").val();
    //alert(search_value);
    if (searchFilterXhr) searchFilterXhr.abort();
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function(){
        searchFilterXhr = $.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();
            }
        });
    }, 500);
}