Question

I have a serious problem in my app. I wrote a “facebook like” instant search:

There is a:

<input id="theinput" type="text" title="New Search"/>

Which appears after i select which category i want to search for, exp: rock, heavy metal, pop, indie… so, depending of which category i click javascript sets it’s name to a variable for the search page to know what table to search in (being each table a category). So part of the javascript is:

$('#rockselector').click(function(){
        fadethings();
        $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Rock Artist</span>');
        whichselector = "rock";
        soletsgo();
    });

    //-----------------------------------------------

    $('#heavymetalselector').click(function(){
        fadethings();
        $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Heavy Metal Artist</span>');
        whichselector = "heavymetal";
        soletsgo();
    });

The ‘fadethings()’ function will fadeOut the div where you select which category, and it will fadeIn the div which will show the results of the search and the input: ‘theinput’, shown above. The function ‘soletsgo()’ will do the search:

        function soletsgo(){

$('#theinput').keyup(function(){

    function searchy(){
    value = escape($('#theinput').val());

    if ( value.length > 0){
    $("#autodatathing").load("../searchmaster.php?word="+value+"&cat="+whichselector+""); }  

    } // End of searchy() function

            setTimeout(searchy,1000);

    }); // End of keyup function

} // End Of Function soletsgo()

The problem is that when i type something long like: ‘The Jimi Hendrix Experience’, it repeats the searches, even when i change category and search another artists it keeps on doing the last search until its kinda reached the result for every ‘keyup’. I Know what is happening here, but, don’t know what to do. Can anyone help?

Answer 1

The problem is that you are triggering the setTimeout every time the keyup event gets triggered. Which results in an ajax request being made every single keypress.

Try something like this:

function soletsgo() {
    var timer, jqXHR, input;

    function searchy() {
        var value = escape(input.val());

        if (value.length > 0) {
            // Abort the last ajax request becuase we don't care anymore
            if (jqXHR) jqXHR.abort();
            jqXHR = $.ajax({
                url: "../searchmaster.php",
                data: {
                    "word": value,
                    "cat": whichselector
                },
                success: function(data) {
                    $("#autodatathing").html(data);
                }
            });
        }

    }

    input = $('#theinput').keyup(function() {
        // Clear the timer because they are typing more
        clearTimeout(timer);
        timer = setTimeout(searchy, 1000);
    });
}