jQuery autocompletado, ¿Puedo tener el ajax previa llamando detuvo cuando levanto una nueva?

Question

Estoy usando autocomplete de jQuery, pero he encontrado un problema de rendimiento relacionados - Si la entrada I 'ABC', que va a escanear por 'a', por 'ab', y 'ABC', a la vez, ¿Cómo puedo detener el anterior 'a', 'ab' cuando ajax llamada está haciendo la búsqueda por 'abc'?

El caso similar es: Yo uso jQuery tablas de datos, y quiero hacer algunas búsquedas como, he escrito algo para buscar (llamado método de búsqueda en la Web), y el botón se hizo clic - 'Buscar' 3 veces a la vez, o cambiada texto de búsqueda justo cuando hice clic en 'Buscar', y formar una nueva búsqueda, ¿cómo puedo detener la anterior llamada ajax inútil?

Answer 1

Si se asume que está utilizando jQuery UI autocompletar :

1. Puede especificar la longitud mínima de la cadena antes de que comience la búsqueda. (Por defecto es 3, supongo)
2. También puede especificar el retraso entre la última pulsación de tecla y la llamada AJAX. Por lo general, 2-300ms debe hacer.
3. AjaxQueue podría ayudarle a limpiar algunas cosas. No sé cómo (Nunca lo necesito), pero merece la pena intentarlo:)

Answer 2

$.ajax de JQuery devuelve un objeto XMLHTTPRequest que puede ser cancelado a través de su método nativo .abort()

$("#search").autocomplete({
    minLength: 3,
    delay: 300, // this is in milliseconds
    json: true,
    source: function(request, response){
        // New request 300ms after key stroke
        var $this = $(this);
        var $element = $(this.element);
        var previous_request = $element.data( "jqXHR" );
        if( previous_request ) {
            // a previous request has been made.
            // though we don't know if it's concluded
            // we can try and kill it in case it hasn't
            previous_request.abort();
        }
        // Store new AJAX request
        $element.data( "jqXHR", $.ajax( {
            type: "POST",
            url: "foo.php",
            dataType: "json",
            success: function( data ){
                response( data );
            }
        }));
    }
});