Weblink automatisch anpassbar mit Eingabefeld

[Sami9898]

@scatello
Du hast recht, aber wenn doch jemand der Erfahrung hat einem Anfänger bei einer schwierigen Funktion wie localStorage helfen kann.

Ich bin ihm sehr dankbar, er hat es mir ja auch angeboten, ich habe es auch versucht auf Eigeninitiative aber ich bin ein purer Anfänger.
Es geht jetzt auch nur um localStorage, ich frage ihn ja auch jetzt nicht wie mache ich meinen Hintegrund pink oder meine Schrift grün oder sowas

 

[Sempervivum]

Wenn eine Meldungsnummer bereits eingetragen wurde, also wenn sie eine von den 8 Optionen ist und ich wieder diese Meldungsnummer eingebe und fortführe, erscheint sie beim nächsten mal nicht ganz oben als zuletzt eingetragen, sondern bleibt auf ihre Position von den 98Optionen stehen.

Das lässt sich leicht beheben: Man braucht die Nummer, wenn sie vorhanden ist, nur zu löschen, sie wird ja anschließend am Anfang wieder hinzu gefügt:

        // Neue Option in Datalist eintragen:
        function insertOption(nr) {
            const datalist = document.getElementById('datalist-claimnr');
            // Array mit Claimnumbers aus den Optionen erzeugen:
            // nrArray = [];
            nrArray = Array.from(document.querySelectorAll('#datalist-claimnr option'),
                item => { return item.textContent; });

            // Ist die neue Nummer schon darin?
            const pos = nrArray.indexOf(nr);
            if (pos >= 0) {
                // Die Nummer ist schon darin, wir entfernen sie,
                // damit sie am Anfang wieder hinzu gefuegt wird:
                nrArray.splice(pos, 1);
            }
            // Jetzt fuegen wir die Nummer am Anfang hinzu:
            nrArray.unshift(nr);

            // Ist jetzt die max. Anzahl der Elemente ueberschritten?
            if (nrArray.length > maxOptions) {
                // Das letzte Element entfernen:
                nrArray.pop();
            }
            // Jetzt das Array in Localstorage eintragen:
            localStorage.setItem('claimnumbers', JSON.stringify(nrArray));
            console.log(nrArray)
        }

 

[Sempervivum]

Logisch wäre es, wenn er nicht eine Zahlenfolge in der Meldungsnummer vorschlage, sondern eine Zahlenfolge von links nach rechts. Also wenn ich nur 18 eingebe, soll er mir alle vorherigen Meldungsnummern mit "18" am Anfang vorschlagen.

Leider lässt sich das Suchverhalten von Datalist nicht beeinflussen, jedenfalls nicht ohne üble Trickserei, z. B. indem man die Optionen beeinflusst. Besser wäre es, ein Plugin wie Select2 einzusetzen, mit dem man ein Custom-Match machen kann:
https://select2.org
https://select2.org/searching#customizing-how-results-are-matched
Select2 hat zusätzlich folgende Vorteile:
- Das Aussehen ist browser-unabhängig
- Das Aussehen kann man selber konfigurieren

 

[Sami9898]

Nice! Ich werde es versuchen einzuzbauen.
Vielen dank Sempervivum!

Was machst du so das du dich so gut mit html und javascript auskennst? Wie hast du gelernt?

 

[Sempervivum]

Was das Select2 betrifft, so habe ich noch ein wenig weiter geforscht und fest gestellt, dass Du es doch nicht einsetzen kannst: Es unterstützt zwar das Custom-Match aber nur die Auswahl einer Option aber nicht die Eingabe einer neuen.

Ich habe jedoch dieses gefunden:
http://projects.sergiodinislopes.pt/flexdatalist/
und das scheint alles zu liefern was Du brauchst: Standardverhalten von Datalist aber der Vergleich ist umschaltbar zwischen "Suchstring wurde irgend wo gefunden" und "Suchstring wurde am Anfang gefunden". Wobei letzteres Default ist.

Was machst du so das du dich so gut mit html und javascript auskennst? Wie hast du gelernt?

Im Beruf habe ich Software entwickelt mit C(++), ein wenig Java, Pascal und Oracle-SQL.
Mit der Webentwicklung habe ich so kurz vor der Jahrtausendwende begonnen, zunächst nur in kleinem Umfang und dann ein wenig intensiver als ich in den Ruhestand gegangen bin. Das meiste habe ich durch Ausprobieren und Anpassen von Beispielen, Anleitungen und Lesen der Doku gelernt. Das Wissen ist dadurch so langsam gewachsen.