Michael: Liste mit URL filtern, ohne Javascript

Hallo,

ähnlich dieser Anleitung möchte ich eine Liste von Schlagworten filtern, allerdings soll das Ergebnis klickbare URLs anzeigen.

Ich bitte um Unterstützung.

  1. @@Michael

    ä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

    Wähle zwei davon, alles drei wird nicht gehen.

    Jolan tru

    --
    Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich bin von Gott errettet worden.“
    1. 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 ...

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

        --
        sumpsi - posui - obstruxi
        1. 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 ...

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

            --
            sumpsi - posui - obstruxi
            1. @@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

              --
              Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich bin von Gott errettet worden.“
            2. 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!

              1. @@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

                --
                Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)
          2. 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

            --
            sumpsi - posui - obstruxi
            1. @@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

              --
              Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)
        2. Dieser Beitrag wurde gelöscht: Sockenpuppe oder Identitätsdiebstahl?
    2. Lieber Gunnar,

      Du möchtest:

      ist doch sonnenklar: Eine gebrauchsfertige Lösung! scnr

      Liebe Grüße

      Felix Riesterer