Datalist dynmaisch erweitern (Firefox)

[Florian Traut]

Hallo,

ich möchte dynamisch bei der Eingabe eines Input-Feldes eine Datalist entsprechend der Eingabe hinzufügen.

Das funktioniert wie folgt: Ich habe mehrere Begriffe und wenn ein Begriff zutrifft, wird entsprechend der dazugehörige Datalist Eintrag in den DOM-Baum geschrieben. Vorher ist die Datalist leer.

Was ich also versuche zu erreichen ist, dass wenn ich etwas eintippe, zum Beispiel eines der folgenden Wörter: "Shell Aral Jet" soll in der Datalist nicht "Shell Aral Jet" als Vorschlag erscheinen, sondern "Tankstelle". Das prüfe ich mit .test().

Prinzipiell funktioniert das. Die Option "Tankstelle" wird in den DOM geschrieben wenn ich Aral eintippe. Jetzt kommt jedoch das Problem. Während ich bei Edge den datalist-Eintrag "Tankstelle" wählen kann, geht das bei Firefox nicht, obwohl ich im Inspektor deutlich sehe, dass der Eintrag im DOM vorhanden ist. Erst wenn ich einmal die Backspace-Taste drücke, erscheint ein Ergebnis.

Beispielcode:

         var arr = [
            // Anzeigename, Suchmuster
            ["Tankstelle", "Aral Jet Shell"],
            ["Obst", "Banane Orange Apfel"]
        ];

        document.getElementById('Inputfeld').oninput = Datalist;

        function Datalist()
        {
            var o = document.getElementById("Inputfeld");
            var BIC = document.getElementById("BIC");

            var l = arr.length;

            if (o.value.length >= 3)
            {
                var Z = 0;
                var Treffer = new RegExp(o.value, "i");

                for (var i = 0; i < l; i++)
                {
                    if (Treffer.test(arr[i][1])) {
                        BIC.innerHTML = "<option>" + arr[i][0] + "</option>";
                        Z++;
                    }
                }
            }
        }

HTML Code:

<input id="Inputfeld" list="BIC" name="BIC" style="width:500px; height: 34px; border: 2px solid black" />
<datalist id="BIC">
</datalist>

Probiert habe ich auch folgendes. Geht auch nicht ohne zusätzliche Backspace-taste:

var t = document.createElement('option');
 t.value = arr[i][0];
 BIC.appendChild(t);

Ich würde mich freuen, wenn jemand eine Lösung für das Problem hätte 🌝

Gruß Florian