AJAX-Liste über Eingabefeld nach Titel und Bescheibung filtern
Veröffentlichungsdatum: 06. September 2021
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Listen lassen sich über AJAX aktualisieren und dabei die Parameter anpassen. Mit diesem Prinzip sind auch benutzerabhängige Filter umsetzbar bei denen die Liste durch die Benutzerangabe aktualisiert wird. In folgendem Beispiel kann ein Besucher einen Filter bzw. einen Suchbegriff in ein Eingabefeld eingeben und so die Liste filtern.
Zur Umsetzung der Funktion sind folgende Schritte notwendig:
- Fügen Sie eine Liste in die Seite ein und ergänzen Sie den in folgendem Beispiel gezeigten frei definierbaren Filter.
- Fügen Sie ein HTML-Quelltext Element in die Seite ein und füllen Sie es mit folgendem Quelltext.
- Passen Sie die Listen-ID (nur die ersten 8 Zeichen) entsprechend Ihrer Liste an. Sie finden die Listen-ID am Ende der Konfigurationsmaske.
- Aktivieren Sie in den Listenoptionen die Checkbox "Inhalte über AJAX laden"
Filter in der Liste, um nach Titel und Beschreibung zu filtern
Die Eingaben im Listenfilter finden Sie nachfolgend als kopierbaren Text:
wPath: /wd:extension/wd:meta/wd:title/text()|/wd:extension/wd:meta/wd:description/text()
Bedingung:
Inhalt des HTML-Quelltext Elementes
<input id="filterText" placeholder="Nach Titel, Beschreibung filtern" style="width:80% !important;" onkeyup="filterText(this.value)" /> <script> function filterText(text){ var urlNew = wSetParameter(location.href, 'term', text); history.pushState({page: urlNew}, "", urlNew); reloadListAjax('xxxxxxxx'); // xxxxxxxx steht für die Listen-ID der betreffenden Liste } </script>