Instant Search für Nachrichten-Liste

**stomfohrde** · 25.04.2020, 22:22

Hallo zusammen,

ich habe auf einer Seite eine Newsliste eingebunden und ich würde diese Liste nun gerne via InstantSearch filtern lassen. Gibt es hierzu evlt schon eine Lösung. Leider habe ich nichts hilfreiches im Contao-Forum, als auch auf einschlägigen Code-Schnippsel-Seiten gefunden.

Da ich das Template etwas angepasst habe noch eine kurze Erläuterung:
Alle Einzelelemente aus der mod_newslist sind nun von einem Anker (a) umschlossen. Mir würde es vollkommen ausreichen, wenn die a-Elemente (inkl aller eingeschlossenen Elemente) durchsucht werden. Alle a-Elemente, die nicht die entsprechende Zeichenanfrage enthalten, werden ausgeblendet.

Vielen Dank vorab.

Gruß

**Spooky** · 26.04.2020, 09:56

Was meinst du mit "InstantSearch"?

**planepix** · 26.04.2020, 10:47

Ich vermute mal sowas wie Autovervollständigung…

**stomfohrde** · 26.04.2020, 12:57

Damit meine ich sowas: https://www.w3schools.com/howto/howt...lter_lists.asp

Also es werden dinge umgehend mit der Eingabe von Zeichen gefiltert und nicht erst nach dem Drücken auf einen Button.

ich habe den entsprechenden Code von w3c auch schon versucht anzupassen, aber bei der Schleife haben meine Kenntnisse dann ein Ende.

Code:

<body>


<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<div class="mod_newslist">
  <a class="layout_latest arc_4 block odd itemLogList" href="adresse zum artikel">
      <p class="info">#011&nbsp;| </p>
      <div class="project_teaser">
          <h2 itemprop="name">raster als grundlage zum modul teil 2</h2>
          <div class="ce_text block keys" itemprop="description">
              <p>modul</p>
          </div>
      </div>
  </a>
  <a class="layout_latest arc_4 block odd itemLogList" href="adresse zum artikel">
      <p class="info">#010&nbsp;| </p>
      <div class="project_teaser">
          <h2 itemprop="name">raster als grundlage zum modul teil 2</h2>
          <div class="ce_text block keys" itemprop="description">
              <p>modul</p>
          </div>
      </div>
  </a>
  <a class="layout_latest arc_4 block odd itemLogList" href="adresse zum artikel">
      <p class="info">#009&nbsp;| </p>
      <div class="project_teaser">
          <h2 itemprop="name">raster als grundlage zum modul teil 2</h2>
          <div class="ce_text block keys" itemprop="description">
              <p>modul</p>
          </div>
      </div>
  </a>
</div>

<script>
function myFunction() {
    var input, filter, div, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementByClassName("mod_newslist");
    a = div.getElementsByClassName("itemLogList");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>