Mehrere automatische Vervollständigung Calls - jQuery

Question

Ich bin an der jQuery UI zum automatischen Vervollständigung der Dokumentation suchen und an ihrem Beispiel für einen Rückruf mit Caching suchen:

$(function() { 
    var cache = {}, lastXhr; 

    $('#Field').autocomplete({ 
     minLength: 2, 
     delay: 600, 
     source: function(request, response) { 
      var term = request.term; 

      if(term in cache) { 
       response(cache[term]); 
       return; 
      } 

      lastXhr = $.post('LoadData', function(data, status, xhr) { 
       cache[term] = data; 

       if(xhr === lastXhr) { 
        response(data); 
       } 
      }); 
     } 
    }); 
}); 

Die Code-Leitungen bis ein Feld zum automatischen Vervollständigung verwenden und speichert einen Cache von Abfragen, die bereits getroffen wurden. Die folgende Zeile verwendet wird, so dass, wenn eine Abfrage dauert länger als der andere ist es nicht die zur automatischen Vervollständigung Werte ersetzen:

if(xhr === lastXhr) { 
    response(data); 
} 

Wenn ich anfangen ein paar Buchstaben eingeben und es geht an den Server, die Daten abzufragen, dann ich pausieren und beginnen Sie erneut zu tippen, es wird eine weitere Reise zum Server auslösen. Wenn die erste Abfrage nach der zweiten Abfrage beendet wird, wird das Ladesymbol nicht mehr gelöscht. Ich nehme an, dies ist, weil es nie den Callback response() aufruft. Gibt es eine Möglichkeit, die erste Anfrage nach einer zweiten Anfrage abzubrechen?

Answer 1

Können Sie einfach lastXhr.abort() direkt vor dem Post hinzufügen? Dies würde eine vorherige Anfrage jedes Mal abbrechen, wenn Sie eine neue starten.

$(function() { 
    var cache = {}, lastXhr; 

    $('#Field').autocomplete({ 
     minLength: 2, 
     delay: 600, 
     source: function(request, response) { 
      var term = request.term; 

      if(term in cache) { 
       response(cache[term]); 
       return; 
      } 

      // Abort previous access if one is defined 
      if (typeof lastXhr !== 'undefined' && lastXhr.hasOwnProperty("abort")) { 
       lastXhr.abort(); 
      } 

      lastXhr = $.post('LoadData', function(data, status, xhr) { 
       cache[term] = data; 

       if(xhr === lastXhr) { 
        response(data); 
        // Set to undefined, we are done: 
        // helps when deciding to abort 
        lastXhr = undefined; 
       } 
      }); 
     } 
    }); 
}); 

Answer 2

Speichern Sie Ihr Endergebnis zusammen mit der Anfrage. Sie können dann sicherstellen, dass der Antwort-Callback jedes Mal aufgerufen wird und die LastData sicherstellen, dass die richtigen Daten verwendet werden, unabhängig davon, ob die Abfragen nicht mehr synchron sind.

Wie in:

$(function() { 
    var cache = {}, lastXhr,lastData; 

    $('#Field').autocomplete({ 
     minLength: 2, 
     delay: 600, 
     source: function(request, response) { 
      var term = request.term; 

      if(term in cache) { 
       response(cache[term]); 
       return; 
      } 

      lastXhr = $.post('LoadData', function(data, status, xhr) { 
       cache[term] = data; 

       if(xhr === lastXhr) { 
        response(data); 
        // Store the latest data 
        lastData = data; 

       } 
       else 
       { 
        // Queries have come back out of sync - this isn't the last one 
        // but we need to call response to stop the spinner 
        response(lastData); 
       } 
      }); 
     } 
    }); 
});