Ich benutze die jQuery-Benutzeroberfläche .autocomplete()
, die ich wirklich liebe. Ich habe ein großes Problem, das ich nicht lösen kann.
Wenn Sie einen Buchstaben eingeben, sagen Sie s , und stackoverflow wird im Dropdown-Menü angezeigt, und ich verwende die Maus, um stackoverflow , dann verliert das Eingabefeld vorübergehend den Fokus, wodurch das Ereignis onblur
aufgerufen wird.
Obwohl das Eingabefeld in der Regel " blur
ed" ist, wenn ich klicke, geht das gegen die Usability-Intuition. Wie kann ich dieses lästige Verhalten beheben?
Sie können versuchen, das Öffnungs- und Schließungs-Ereignis der jQuery UI-Autocomplete zu verwenden, um das Blur-Ereignis Ihrer Textbox zu steuern. Wenn die automatische Vervollständigung geöffnet ist, deaktivieren Sie das Blur-Ereignis und wenn es geschlossen wird, aktivieren Sie das Blur-Ereignis erneut. Ich habe ein funktionierendes Beispiel auf jsfiddle.net eingerichtet. Hoffe es hilft.
%Vor%Was haben Sie in Ihrem Blur-Event? Es ist eine Art Hacky, aber Sie könnten ein setTimeout mit einer relativ kurzen Verzögerung für den Handler Ihrer Unschärfe machen. Dann können Sie eine Variable im Focus-Event-Handler des Autocomplets setzen und Ihrem Blur-Handler mitteilen, dass er nicht ausgelöst werden soll.
Während die obige Antwort von drzone88 großartig funktioniert, gibt es einen Randfall, über den ich gestolpert bin: Wenn Sie suchen und keine Ergebnisse angezeigt bekommen, wird das close-Ereignis nie aufgerufen. Dann wird Ihre Unschärfe-Funktion auch nie aufgerufen. Also habe ich das Flag gesetzt, wenn der Inhalt der Antwort leer ist.
Meine Lösung verwendet auch jquery.data (), so dass wir keine Variable umherziehen müssen:
%Vor%Wie sich jedoch herausstellt, aufgrund der Reihenfolge, in der Ereignisse aufgerufen werden und was ich eigentlich tun musste (flackere etwas aus, wenn der Benutzer das Feld verwischt, ohne eine Option im Vorschlag auszuwählen) list), setzte ich am Ende der Auswahlfunktion mein noblur-Flag auf true und am Ende der Unschärfe wieder auf false, so:
%Vor%Hoffe, das kann jemandem helfen!
Tags und Links jquery jquery-ui jquery-ui-autocomplete