Enter key pressed fast

Question

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 1

It is not supposed to return the results because you never start the searchFilter , if you use enter, you see if (event.keyCode == 13) return false;

keyCode 13 == ENTER, which means that u return false before searchFilter(); gets called. Remove the if (event.keyCode == 13) return false;

Answer 2

You need use "promise timeout" like this:

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

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