Efficient AutoSuggest with jQuery?

问题

I'm working to build a jQuery AutoSuggest plugin, inspired by Apple's spotlight.

Here is the general code:

$(document).ready(function() { 
$('#q').bind('keyup', function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        $("#q").css("background-image","url(/images/ajax-loader.gif)");

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions').fadeIn(); // Show the q-suggestions box
                $('#q-suggestions').html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
                $("#q").css("background-image","url(/images/icon-search.gif)");

            }
        });
    }
});

The issue I want to solve well & elegantly, is not killing the sever. Right now the code above hits the server every time you type a key and does not wait for you to essentially finish typing. What's the best way to solve this? A. Kill previous AJAX request? B. Some type of AJAX caching? C. Adding some type of delay to only submit .AJAX() when the person has stopped typing for 300ms or so?

回答1:

Try using Ben Alman's Throttle & Debounce plugin

Lets you "delay" things till the user is done.

For an example on how to use it check out his example of debouncing with a pretend autocomplete

Your code would basically become

var qinput = $('#q').bind('keyup', $.debounce( 250, function() {

    if( $(this).val().length == 0) {
        // Hide the q-suggestions box
        $('#q-suggestions').fadeOut();
    } else {
        // Show the AJAX Spinner
        qinput.addClass('loading');

        $.ajax({
            url: '/search/spotlight/',
            data: {"q": $(this).val()},
            success: function(data) {
                $('#q-suggestions')
                    .fadeIn() // Show the q-suggestions box
                    .html(data); // Fill the q-suggestions box

                // Hide the AJAX Spinner
               qinput.removeClass('loading').addClass('search');
            }
        });
    }
}));

CSS

.loading{
    background: url('/images/ajax-loader.gif');
}
.search{
    background: url('/images/icon-search.gif');
}

You will note that I removed your background-image css and replaced them with addClass/removeClass. Much easier to manage css stuff in css files.

回答2:

I'd go for a variant of C. Don't wait for users to stop typing, but wait some time (200ms?) after the first keystroke. Then after that time, you will in many cases have received additional keystrokes and then you use the typed characters to get the autosuggest. If another key is pressed after submitting the request, you start counting again.

And you should definitely do some caching too; people will use backspace and you'll have to show the name list again.