Welches Ereignis für die Suche verwenden

Question

Ich habe ein Suchfeld, das eine Abfrage sammelt und eine Suche mit einer AJAX-Anfrage durchführt. Ich habe Probleme, das perfekte Javascript-Ereignis zu finden, um die Suche auszuführen.

oninput Mit oninput wird die AJAX-Anforderung mehrmals ausgelöst, einmal für jedes Zeichen im Eingabefeld. So Suche nach '123' drei AJAX-Anfragen durchführen wird:

1. '1'
2. '12'
3. '123'

Onchange Mit Onchange, dass effizienter ist, Es löst nur eine einzelne AJAX-Anforderung aus, aber es zwingt den Benutzer, den Fokus aus dem Suchfeld zu ändern, um zu feuern.

Gibt es ein Javascript-Ereignis, das ich verwenden kann, um das Beste aus beiden Welten zu haben? Ich verwende eine Timeout-Verzögerung von 1,5 Sekunden bei der Suche, um dem Benutzer genügend Zeit zu geben, die Suchanfrage einzugeben. Im Idealfall möchte ich ein JS-Ereignis wie oninput verwenden, das ausgelöst wird, ohne dass das Feld den Fokus verliert, sondern nur einmal für den gesamten Wert statt einmal für jedes Zeichen im Eingabefeld ausgelöst wird.

Vielleicht ist die Antwort, das onchange-Ereignis Ereignis zu verwenden und den Fokus nach 1,5 Sekunden automatisch zu verlieren? Dies scheint nur Hacky zu sein und führt auch zu einem Usability-Problem. Wenn der Benutzer die Suchabfrage ändern möchte, müsste er den Fokus erneut auf das Suchfeld setzen.

Answer 1

Dies ist, wie Sie es tun könnte, Entprellung input Veranstaltung:

$('input[type=search]').on('search', function(){ 
    if(this.value){ 
    /* call ajax request here */ 
    } 
}); 

Siehe -DEMO-

Answer 2

Ich würde:

$('input[type=search]').on('input', function(){ 
    clearTimeout(this.delay); 
    this.delay = setTimeout(function(){ 
     console.log(this.value); 
     /* call ajax request here */ 
    }.bind(this), 800); 
}); 

Und für eine bessere UIX, Sie search Ereignis binden, sollte empfehlen, einen Anruf auszuführen, wenn der Benutzer auf Enter klickt. Es scheint wirklich ganz natürlich zu sein, auf Enter zu klicken, wenn Sie das Wort fertig geschrieben haben.

Dieser Code führt doYourStuff() aus, wenn der Benutzer nach der Eingabe von Daten in searchBox auf Enter klickt.

$("#searchBox").keyup(function (event) { 
     if (event.keyCode == 13) { 
      doYourStuff(); 
     } 

Wenn Sie die Lösung nicht mögen, können Sie immer einen kleinen Knopf mit einem ausgefallenen Suchsymbol hinzufügen und führen Sie rufen, wenn der Benutzer auf die Schaltfläche klickt.