Liste mit URL filtern, ohne Javascript
Michael
- html
Hallo,
ähnlich dieser Anleitung möchte ich eine Liste von Schlagworten filtern, allerdings soll das Ergebnis klickbare URLs anzeigen.
Ich bitte um Unterstützung.
@@Michael
ähnlich dieser Anleitung möchte ich eine Liste von Schlagworten filtern, allerdings soll das Ergebnis klickbare URLs anzeigen.
Du möchtest:
Wähle zwei davon, alles drei wird nicht gehen.
Jolan tru
Danke @ Jolan tru
ähnlich dieser Anleitung möchte ich eine Liste von Schlagworten filtern, allerdings soll das Ergebnis klickbare URLs anzeigen.
Du möchtest:
clientseitig filtern (ohne zusätzlichen Request zum Server)- clickbare Links
- kein JavaScript verwenden
Meine Auswahl habe ich jetzt markiert ...
Hallo Michael,
na dann... Wenn ein Serverkontakt nicht verboten ist, dann bau ein Form, schick den Suchstring zum Server und lass von ihm die Linkliste generieren. Ohne JavaScript ist der Form-Submit allerdings nicht im Hintergrund möglich, der Anwender muss explizit Submit klicken oder ENTER drücken.
Das hat dann nur leider mit unserer datalist-Anleitung nichts mehr zu tun.
Generell sind Links (oder generell HTML) in einer datalist nicht möglich, nur einfacher Text. Weil der Zweck der Listensuche ja darin besteht, einen Wert für eine Textbox auszuwählen.
Irgendwie habe ich aber den Verdacht, dass Du Dir das so nicht vorgestellt hast…
Rolf
Danke,
Irgendwie habe ich aber den Verdacht, dass Du Dir das so nicht vorgestellt hast…
Wahrscheinlich!
Die gekürzte Liste:
Hier ein Feld zur Freitext-Eingabe ...
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#Alpenh%C3%BCtte">Alpenhütte</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#Altenheim">Altenheim</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#Altersheim">Altersheim</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#Altglascontainer">Altglascontainer</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#"Altkleider-Container>Altkleider-Container</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/A#Altstoffsammelzentrum">Altstoffsammelzentrum</a></p>
<p><a href="https://wiki.openstreetmap.org/wiki/DE:How_to_map_a/B#Badeanstalt">Badeanstalt</a></p>
Nun möchte ich in das Freitext-Feld "Bade" eingeben und eine Zeile wird angezeigt; bei Eingabe "Alt" entsprechend fünf Zeilen ...
Hallo Michael,
ja, sicher. Mit einem Form und Serversupport geht das.
<form method="POST" ...>
<label for="filter">Filter: </label><input id="filter" type="search" name="filter">
<button type="submit" name="filtern">Los</button>
</form>
<ul>
<li><a href="...">Bla</a></li>
<li><a href="...">Blub</a></li>
<li><a href="...">Abra</a></li>
<li><a href="...">Kadabra</a></li>
</ul>
Filter eintippen, ENTER drücken, Server generiert die gefilterte Linkliste und schickt die Seite passend zurück.
Ohne Server heißt die Lösung: JavaScript.
Rolf
@@Rolf B
ja, sicher. Mit einem Form und Serversupport geht das.
Filter eintippen, ENTER drücken, Server generiert die gefilterte Linkliste und schickt die Seite passend zurück.
Ohne Server heißt die Lösung: JavaScript.
Und als Entscheidungshilfe: Die Entscheidung sollte nicht davon abhängen, ob du JavaScript magst/kannst, sondern davon, ob Nutzer ENTER drücken und auf die Antwort vom Server warten wollen oder ob die Filterung in einem Augenzwinkern geschehen soll.
Spoiler: zweiteres.
Jolan tru
Ganz herzlichen Dank @ Rolf B
ja, sicher. Mit einem Form und Serversupport geht das. ...
Das ist besser als das, was ich mir erhofft hatte! Großartig!
@@Michael
ja, sicher. Mit einem Form und Serversupport geht das. ...
Das ist besser als das, was ich mir erhofft hatte! Großartig!
Nö. Großartig wäre nicht, was du dir erhoffst; sondern das, was sich die Nutzer deiner Seiten erhoffen.
Jolan tru
Hallo Michael,
oder anders gesagt: Wenn Du komfortable Webseiten mit hoher Schwuppdizität bauen willst, überwinde deine Abneigung gegen JavaScript.
<label for="filter">Filter: </label><input type="search" id="filter" />
<ul id="linkList">
<li><a href="...">Alpenhütte</a></li>
<li><a href="...">Altenheim</a></li>
<li><a href="...">Altersheim</a></li>
<li><a href="...">Altglascontainer</a></li>
<li><a href="...">Altkleider-Container</a></li>
<li><a href="...">Altstoffsammelzentrum</a></li>
<li><a href="...">Badeanstalt</a></li>
</ul>
<script>
const filterListe = document.querySelectorAll("#linkList a");
document
.querySelector("#filter")
.addEventListener("input", function(inputEvent) {
const filter = inputEvent.target.value.toLocaleLowerCase("de");
filterListe.forEach(link => {
link.parentElement.hidden = !link.textContent.toLocaleLowerCase("de").includes(filter);
});
});
</script>
#linkList
und #filter
sind die IDs der entsprechenden HTML Elemente, die musst Du für deine Zwecke anpassen. Wenn deine Seite nicht nur auf deutsch angezeigt werden kann, muss die locale-Angabe für toLocaleLowerCase flexibler gemacht werden. Wie sich das bei automatischen Übersetzungen verhält, d.h. ob man da überhaupt mitkriegt, dass der Browser übersetzt hat, weiß ich nicht.
Beachte aber, dass eine Liste mit 1000 Einträgen oder so den Browser schon ordentlich ins Schwitzen bringen kann. Verarbeitung größerer Datenmengen gehört eher auf den Server, umfangreichere Suchen gehören in die Datenbank.
@Gunnar: Setzt ein Auto-Übersetzer ein lang-Attribut? Der Browser, hinter dem ich hier hänge, bietet mir gerade die Option nicht an. Wie kriege ich den Wert des für das input geltenden lang-Attributs heraus? element.closest("[lang]").lang
? Oder geht das eleganter?
Rolf
@@Rolf B
@Gunnar: Setzt ein Auto-Übersetzer ein lang-Attribut?
🤷♂️
Wie kriege ich den Wert des für das input geltenden lang-Attributs heraus?
element.closest("[lang]").lang
? Oder geht das eleganter?
Was anderes fällt mir auch nicht ein. Element.lang
ist kein Interface, das die berechnete Sprache zurückgibt, sondern den Wert des lang
-Attributs ebendieses Elements – wenn keins angegeben ist, dann Leerstring. Test
Jolan tru
Lieber Gunnar,
Du möchtest:
ist doch sonnenklar: Eine gebrauchsfertige Lösung! scnr
Liebe Grüße
Felix Riesterer