Ich lade Optionen dynamisch in ein HTML5 datalist -Element. Der Browser versucht jedoch, datalist anzuzeigen, bevor die Optionen geladen wurden. Dies führt dazu, dass die Liste nicht angezeigt wird oder manchmal eine unvollständige Liste angezeigt wird. Gibt es eine Möglichkeit, die Liste über JavaScript zu aktualisieren, sobald die Optionen geladen sind?
HTML
%Vor%JavaScript
%Vor%Hinweis: In Chrome und Opera wird die gesamte Liste nur angezeigt, wenn der Benutzer nach der Texteingabe auf die Eingabe klickt. Allerdings möchte ich, dass die gesamte Liste als der Benutzertypen angezeigt wird. Firefox ist kein Problem, da es scheint, dass die Liste automatisch aktualisiert wird, wenn die Optionen aktualisiert werden.
AKTUALISIEREN
Ich bin nicht sicher, ob diese Frage eine befriedigende Antwort hat, da ich glaube, dass dies ein Manko bestimmter Browser ist. Wenn ein datalist aktualisiert wird, sollte der Browser die Liste aktualisieren, aber einige Browser (einschließlich Chrome und Opera) tun dies einfach nicht. Hacks?
Ziemlich lange nach der Frage, aber ich fand einen Workaround für IE und Chrome (nicht getestet auf Opera und schon OK für Firefox).
Die Lösung besteht darin, die Eingabe am Ende der erfolgreichen (oder abgeschlossenen) Funktion wie folgt zu fokussieren:
%Vor%Es funktioniert auf Firefox, Chrome und IE 11+ (vielleicht 10).
Sie können das Problem wahrscheinlich beheben, wenn Sie nicht bei jedem Tastendruck eine AJAX-Anforderung stellen. Sie können die Drosselungstechnik ausprobieren, indem Sie set/cleatTimeout verwenden, um eine Anforderung nach 500 ms nach dem letzten eingegebenen Zeichen auszugeben:
Yoyo hat die richtige Lösung gegeben, aber hier ist eine bessere Möglichkeit, Ihre Inserts in das DOM zu strukturieren.
%Vor%Mit dieser Verfeinerung füge ich nur einmal pro erfolgreichem Callback in das DOM ein. Dies reduziert den Browser, der erneut gerendert werden muss, und hilft, "Blips" in der Ansicht zu verbessern.
Hier verwenden wir die Array.prototype.map einige der jQuery aufräumen und die Dinge etwas weniger idiomatisch machen. Sie können aus dem ECMA-Diagramm entnehmen, dass diese Funktion in allen Browsern funktioniert Sie zielen darauf ab.
Das ist keineswegs hacky. IE scheint der einzige Browser zu sein, der die Eingabe nicht automatisch aktualisiert, um die neuen Listenoptionen anzuzeigen. focus () ist nur eine Möglichkeit, um sicherzustellen, dass die Eingabe neu ausgerichtet wird, wodurch eine Aktualisierung der Ansicht erzwungen wird.
Diese Lösung funktioniert sehr gut in allen Browsern, die mein Unternehmen intern unterstützen muss, IE10 + Chrome und Firefox.
Ihr Problem ist, dass AJAX asynchron ist.
Sie müssten tatsächlich einen Callback für den AJAX haben, den Sie onSuccess nennen, der dann den Datenlogger aktualisieren würde. Natürlich haben Sie dann vielleicht keine großartige Leistung / haben immer noch ein "Überspring" -Verhalten, bei dem Ihre Datalist-Optionen hinterherhinken.
Wenn Ihre Liste der Gegenstände aus dem AJAX nicht zu groß ist, sollten Sie:
1. Laden Sie die GESAMTE Liste in das Speicher-Array mit der ersten Abfrage, dann ...
1. Verwenden Sie eine Filterfunktion, die jedes Mal auf das Array angewendet wird, wenn Sie ein Ereignis keyUp haben.
Tags und Links javascript jquery ajax html5 html-datalist