Enter key pressed fast

I am searching from around 5000 records. The search button is working fine. But when I press enter key too fast. It does not bring the result back. I tried codes from stckoverflow.com already but it’s not working for me.

My textbox for search is

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

Javascript for searchfilter()

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

Demo http://jsfiddle.net/togr18Lb/1/

Ok, here’s your solution.

Abort any previous requests when a new one is made so as not to flood the server with them.

Slow down the requests by waiting until the user stops typing.

The button works, so all we need to do is bind keyup and change of input field to trigger that button, rather than duplicate code. And we do this with jQuery, not using onkeyup="".

To make sure we’re not making unnecessary requests returning false when the enter key is pressed is correct, however we use .preventDefault() instead.

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