jQuery autocomplete, Puis-je avoir la ajax précédente appelant est arrêté quand je lève un nouveau?

Question

J'utilise la autocomplete jQuery, mais ont trouvé un problème connexe performance - si l'entrée I « abc », il sera balayage en « a », par « ab » et par « abc », à la fois, comment puis-je arrêter la précédente « a », « ab » quand ajax appel fait par la recherche « abc »?

Le cas similaire: J'utilise jQuery DataTables, et que vous voulez faire quelques recherches comme, je tapé quelque chose à la recherche (méthode web de recherche d'appel), et le bouton cliquée - « Rechercher » 3 fois à une fois, ou le texte de recherche a changé juste au moment où je cliqué « Rechercher », et élever une nouvelle recherche, comment puis-je arrêter le précédent appel ajax inutiles?

Answer 1

En supposant que vous utilisez jQuery UI Autocomplete :

1. Vous pouvez spécifier la longueur minimum de chaîne avant le début de la recherche. (Valeur par défaut est 3 je suppose)
2. Vous pouvez également spécifier le délai entre la dernière séquence de touches et appel ajax. Habituellement 2-300ms devrait faire.
3. AjaxQueue pourrait vous aider à nettoyer des choses. J'sais comment (je ne besoin), mais vaut le coup:)

Answer 2

Le $.ajax de JQuery retourne un objet xmlHttpRequest qui peut être annulé par l'intermédiaire de sa méthode native .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 );
            }
        }));
    }
});