Asynchrone Ajax-Aufrufe in einem Suchfeld

Question

Ich habe vor einigen Monaten eine asp.net-Lösung für einen Kunden entwickelt, in der wir AzureSearch in einer Eingabebox verwenden. Mein Ansatz war, eine Ajax-Anfrage zu senden, sobald eine Sekunde seit dem letzten Tastendruck vom Benutzer vergangen war. Aber unser Kunde wollte, dass es immer beim Wechsel der Eingabebox passiert, also haben wir das gemacht.

Es hat dazu geführt, dass der Client einen Fehler meldet - inkonsistente Suchen. Wegen einer Race Condition habe ich die Async-Aufrufe protokolliert und genau das ist passiert. Ich denke darüber nach, eine Verzögerung von 0,5 Sekunden zur Javascript-Vervollständigung hinzuzufügen. Oder gibt es einen besseren Weg? Wie einen Pool in Javascript zu haben. Die Kontrolle, die wir verwenden, ist jquery easy autocomplete.

Answer 1

Am Ende habe ich nicht eine Verzögerung oder eine Drossel hinzuzufügen brauchte. Mit seiner offiziellen Website überprüft, entdeckte ich zwei sehr nützliche Eigenschaften in jquery-easy-Autovervollständigung, die da sind:

• matchResponseProperty: Rennbedingungen zu vermeiden, da der letzte Ajax-Aufruf neccessarily die letzte Antwort sein musn't aus Der Back-End-Dienst übernimmt die letzte Antwort, die eine mit diesem Attribut angegebene Eigenschaft hat, die mit dem aktuellen Text in der Eingabe übereinstimmt.

• listLocation: Ich habe versucht, ein JSON mit einer anonymen Liste von Elementen und einer Eigenschaft namens InputPhrase zu rendern, bis ich dazu kam, also habe ich den Listenort im Basisantwortobjekt angegeben und dieses Modell für die Antwort verwendet .

  public class SearchViewModel 
  { 
      public List<dynamic> Items { get; set; } 
      public string InputPhrase { get; set; } 
  } 
  

Schließlich stelle ich matchResponseProperty auf "InputPhrase" und listLocation auf "Items"

Answer 2

Was Sie tun, ist eine "Entprellung". Eine Entprellung ist, wenn Sie einen Timer starten Countdown, wenn ein Benutzer die Eingabe startet. Wenn sie vor Ablauf des Timers mehr Eingaben tätigen, wird der Timer zurückgesetzt und beginnt erneut zu zählen. Erst wenn der Timer beendet ist, wird der AJAX-Anruf getätigt. In diesem Fall ist eine Verzögerung von 200 Millisekunden die Forschung, die die meisten Menschen als reaktionsschnell empfinden.

Wenn Sie jedoch wirklich möchten, dass Ergebnisse einfließen, wenn der Benutzer tippt, wird das, was Sie stattdessen brauchen, als "Drosselung" bezeichnet. Eine Drosselung ähnelt einer Entprellung, außer dass sie in regelmäßigen Intervallen ausgelöst wird, anstatt darauf zu warten, dass die Eingabe stoppt. Um einen zu bauen, würden Sie immer noch einen Timer haben, aber Sie würden ihn nicht jedes Mal zurücksetzen, wenn der Benutzer mehr Eingaben eingibt. Stattdessen würden Sie einen booleschen Wert verwenden, um zu verfolgen, ob neue Eingaben eingegeben wurden oder nicht. Wenn der Timer beendet ist, prüft er, ob der Boolesche Wert wahr ist, wenn dies der Fall ist, setze ihn auf "Falsch" und starte den Countdown des Timers neu.

Sie können beide Methoden verbessern, indem Sie verfolgen, ob bereits ein AJAX-Anruf stattgefunden hat. In beiden Fällen, wenn der Timer abgelaufen ist und die boolesche Verfolgung, wenn ein Anruf ausgeführt wird, wahr ist, starten Sie den Timer neu.

Sowohl ein debounce als auch ein throttle sind bereits in mehreren Hilfsbibliotheken wie beispielsweise lodash verfügbar. Sie können sie verwenden, um Ihre vorhandenen Ereignishandler zu umbrechen.

var myInputChangeHandler = function() { 
    // do ajax call 
}; 

// throttled handler will only be called every 200 ms... 
var throttled = _.throttle(myInputChangeHandler, 200); 
// ...no matter how many times this event fires 
jQuery('input[type=text]').on('change', throttled);