<datalist>Objekte nur teilweise ausgeben.?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
11.02.2021, 00:57

Ja, du kannst die Liste selbst mit JavaScript dynamisch filtern.

Folgend einmal ein Beispiel, bei dem nur die ersten drei Einträge eines Arrays angezeigt werden. Nach einer Eingabe von drei Buchstaben werden die restlichen Werte mit eingebracht.

Der HTML-Teil ist natürlich noch recht unspektakulär:

<input list="actors" id="actor">
<datalist id="actors"></datalist>

Interessanter ist das Skript:

function addOption(datalist, value) {
  const option = document.createElement("option");
  option.value = value;
  datalist.appendChild(option);
}

const actors = [
  "Emma Watson",
  "Jennifer Lawrence",
  "Leonardo DiCaprio",
  "Patrick Stewart",
  "Tom Hanks",
  "Tom Hardy"
];
const datalist = document.getElementById("actors");
const initialNumberOfShown = 3;

for (let i = 0; i < initialNumberOfShown && i < actors.length; ++i) {
  addOption(datalist, actors[i]);
}

Bis hierhin wird erst einmal nur das Array möglicher Werte definiert und in die Liste eingeflößt.

In diesem Abschnitt wird ein Event Listener an das Eingabefeld gehängt: 

document.getElementById("actor").addEventListener("input", function() {
  if (this.value.length < 3) {
    while (datalist.children.length > initialNumberOfShown) {
      datalist.removeChild(datalist.lastChild);
    }

    return;
  }

Bei jedem Tastendruck wird der dazugehörige Handler ausgeführt. Dieser schaut, ob die Anzahl an eingegebenen Zeichen noch unter 3 liegt. Wenn ja, wird die Datenliste erst auf ihren initialen Zustand gebracht (falls zuvor schon einmal Werte zugefügt wurden) und danach kann die Funktion abgebrochen werden.

Liegt die Eingabelänge jedoch über drei Zeichen, wird geprüft, ob überhaupt noch Werte zugefügt werden müssen.

  if (actors.length < initialNumberOfShown || datalist.children.length === actors.length) {
    return;
  }

Wenn dem so ist, passiert das auch.

  for (let i = initialNumberOfShown; i < actors.length; ++i) {
    addOption(datalist, actors[i]);
  }
});
Werbemann941 
Beitragsersteller
 11.02.2021, 16:35

Danke für diese tolle Antwort und vor allem Danke das du dir noch die Mühe gemacht hast die Erklärungen dazwischen zu schreiben. Top.

0
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
09.02.2021, 17:29

da musst du dir was eigenes bauen mit javascript .
Werbemann941 
Beitragsersteller
 09.02.2021, 18:36

Wenn du mir so locker antwortest kannst du mir bestimmt auch sagen wie oder mir nützliche Seiten empfehlen die mir bei meinem Problem weiterhelfen.

0