Suchfunktion im Widget Tabellarische Daten

Grüß Gott Zeta-Team,

gibt es irgendeine Möglichkeit, dass man in einer großen Tabelle gezielt mit einer Suchfunktion suchen kann?

Abgesehen von alphabetische Zuordnung durch klicken der Kopfzeile.

Es geht um die Musikbibliothek. Mit der interaktiven Wunschbox iLOVE kann man sich Titel wünschen, die automatisiert ausgespielt werden. Dazu gibt es eine Bibliothek.

Ich hätte da gerne die Suchfunktion für die Hörer/innen direkt auf die Tabelle bezogen. So dass andere Titel ausgeblendet werden und nur die laut Suchfeld angezeigt werden.

Link: iLove Wunschbox | Radio SW1.BAYERN - Deine SchlagerWelt | Musik

Ich werdende die neueste Zeta Version 15 Business.

Viele Grüße

Mirco

Zitat von Mario

Da bleibt wohl nur eine entsprechende Tabelle manuell zu erstellen, wäre aber bei der langen Tabelle sicher viel Fleißarbeit.

Ich habe HIER mal ein Beispiel hochgeladen.

Der Code dafür sieht folgendermaßen aus.

CSS

CSS

<style>
#musiktable_search {
background-image: url('oid://image/search2');
background-position:5px 5px;
background-repeat: no-repeat;
width: 300px;
font-size: 16px;
padding: 8px 12px 8px 30px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#musiktable {
border-collapse: collapse;
width: 100%;
font-size: 16px;
}
#musiktable th, #musiktable td {
text-align: left;
padding: 6px;
}
#musiktable tr {
background-color: #f2f2f2;
}
#musiktable tr:nth-child(even) {
background-color: #ffffff;
}
</style>

Alles anzeigen

HTML / JS

Code

<input type="text" id="musiktable_search" onkeyup="myFunction()" placeholder="Suche nach Titel" title="Suche Titel">


<div style="overflow-x:auto;">


<table id="musiktable">
<tr>
<th style="min-width:220px;">Titel</th>
<th style="min-width:220px;">Interpret</th>
<th style="min-width:200px;">Album</th>
<th style="width:50px;">Jahr</th>
</tr>
<tr>
<td>A Cowgirl bleibt a Cowgirl</td>
<td>Nicki</td>
<td>A Cowgirl bleibt a Cowgirl</td>
<td>1989</td>
</tr>
<tr>
<td>Ale Ale Aleksandra</td>
<td>G.G. Anderson</td>
<td>Alles wird gut</td>
<td>2019</td>
</tr>
<tr>
<td>Der Klang Deiner Stimme</td>
<td>Chanelle</td>
<td>Der Klang Deiner Stimme</td>
<td>2009</td>
</tr>
<tr>
<td>Du bist der Wahnsinn</td>
<td>Julian Haag</td>
<td>    Du bist der Wahnsinn</td>
<td>2020</td>
</tr>
<tr>
<td>Du hast ja Tränen in den Augen</td>
<td>Ramon Roselly</td>
<td>    Herzenssache</td>
<td>2020</td>
</tr>
<tr>
<td>Gänsehaut</td>
<td>SONIA LIEBING</td>
<td>Wunschlos glücklich</td>
<td>2019</td>
</tr>
<tr>
<td>Halt mich fest</td>
<td>David Blabensteiner</td>
<td>Schritt für Schritt</td>
<td>2019</td>
</tr>
</table>


</div>


<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("musiktable_search");
filter = input.value.toUpperCase();
table = document.getElementById("musiktable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

Alles anzeigen

Hallo Mario,

herzlichen Dank, das geht auch. Ist nicht viel Arbeit. War eine Sache von 2 Minuten, da ich aus der Playliste (Tags) eine html-Tabelle erstellen kann. Musste dann nur aus dem Quellcode den Tabellenteil kopieren und einfügen. Fertig!

Wird nur etwas aufwendiger, wenn die Neuvorstellungen alphabetisch ergänzt werden müssen. Vllt. findet Zeta in Zukunft eine Lösung

Muchas Gracias.