jQuery keyup函数立即加载结果 - 阻止我从主机

Question

Ok I have a search suggestion dropdown.

When I type something, a character, it will show all results that are %LIKE% the value I entered.

Using the function keyup().

    var search = $("#search"),
    result = $('ul.dropdown');
    search.keyup(function(){
        if (search.val() !== "") {
            load();
            $.post('search.php?do=search', {search : search.val()}, function(data){
                if (data == ""){
                    stop_load();
                } else {
                    result.html(data);  
                }
            });
                $.post('search.php?do=search&data', {data : search.val()}, function(msg){
                    stop_load();
                    $('#end_results').html(msg);
                }); /** actual search **/
        } else {
            $('#end_results').html('');
            result.html('');
        }
    });

And the PHP for this:

    } else { // the info
        $search = htmlentities(trim($_POST['search']));
        $search_query = "'%$search%'";
        $get_search = $db->prepare("SELECT * FROM `kit_info` WHERE `kit_name` LIKE $search_query LIMIT 10");
        $get_search->execute();
        while ($row = $get_search->fetch(PDO::FETCH_ASSOC)){
            $return .= '<li onClick=\'$("#search").val("'.$row['kit_name'].'");$("ul.dropdown").html("");search();\'>'.$row['kit_name'].'</li>';
        }
        echo $return;
    }

As you see, the PHP echoing a list, that will be in the dropdown suggestion.

Problem

When user searching for 5 minutes or so, every time typing a new character, etc, my host automatically blocks that IP for sending too many requests.

That's because the client has passed his requests limit, and will be blocked for another 24 hours.

A solution I've thought of:

Load all data from mysql, at first when page loads, and then do the actions.

Question

Is there any better & easier solution for this besides expanding the limits?

Is my solution great and would work? How would I do this?

Thanks a lot!

Answer 1

There are some quick and easy ways to do this. one of them is to use a timeout.

when i type in 20 characters within 2 seconds, there is no need to do 20 lookups.

Also you might not want to start searching at the first character, but lets say when the user has typed 3 characters.

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

    // stop any old timers to prevent double execution
    if($('#mysearchelement').data("searchtimer") !== undefined) 
    {
        clearTimeout($('#mysearchelement').data("searchtimer"));
    }

    // here we limit to minimum 3 characters before searching, you can omit this.
    if($(this).val().length > 2)
    {
        var timer = setTimeout(mySearchFunction, 500); // wait 500 ms before searching
        // store the timer in the search field so we know if there are any running
        $(this).data("searchtimer", timer);
    }

});    


function mySearchFunction()
{
    //here you do you actual calls to search.
}