Wie aktualisierst du einen HTML5-Datalist mit JavaScript?

9

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?

    
David Jones 28.10.2014, 14:22
quelle

5 Antworten

2

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).

    
Yoyo 10.01.2016 17:18
quelle
1

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:

%Vor%     
dfsq 28.10.2014 14:42
quelle
1

Yoyo hat die richtige Lösung gegeben, aber hier ist eine bessere Möglichkeit, Ihre Inserts in das DOM zu strukturieren.

%Vor%

Weniger DOM-Manipulation

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.

Funktionale Programmierung und weniger Idiomatische jQuery

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.

Nicht Hacky

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.

    
Josh Hardy 11.05.2016 16:11
quelle
0

Platziere dein #ingredients Element in #container und probiere diesen Code:

%Vor%

sogar noch besser ohne #container und jQuery verwenden replaceWith ():

%Vor%     
Ragnar 28.10.2014 14:32
quelle
0

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.

    
Flak DiNenno 28.08.2015 16:19
quelle