2 Fragen zu Suchmaske

Question 1

Wie realisiere ich eine Suchmaske für eine HTML-Liste?

Answer

Um eine Suchmaske zu erstellen, die es ermöglicht, dynamisch in einer klickbaren Liste von Einträgen zu suchen, kannst du JavaScript zusammen mit HTML verwenden. Hier ist ein einfaches Beisp... [mehr]

Answer

Um eine Suchmaske zu erstellen, die es ermöglicht, dynamisch in einer klickbaren Liste von Einträgen zu suchen, kannst du JavaScript zusammen mit HTML verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <title>Suchmaske Beispiel</title> <style> #myList { list-style-type: none; padding: 0; } #myList li { padding: 8px; cursor: pointer; } #myList li:hover { background-color: #f0f0f0; } </style> </head> <body> <h2>Suchmaske für die Liste</h2> <input type="text" id="searchInput" placeholder="Suche..."> <ul id="myList"> <li>Kategorie 1</li> <li>Kategorie 2</li> <li>Kategorie 3</li> <li>Kategorie 4</li> <li>Kategorie 5</li> <li>Kategorie 6</li> <li>Kategorie 7</li> </ul> <script> const searchInput = document.getElementById('searchInput'); const myList = document.getElementById('myList'); const listItems = myList.getElementsByTagName('li'); searchInput.addEventListener('keyup', function() { const filter = searchInput.value.toLowerCase(); for (let i = 0; i < listItems.length; i++) { const item = listItems[i]; if (item.textContent.toLowerCase().includes(filter)) { item.style.display = ''; } else { item.style.display = 'none'; } } }); </script> </body> </html> ``` In diesem Beispiel: 1. Ein Eingabefeld (`input`) wird erstellt, um die Suchanfrage einzugeben. 2. Eine ungeordnete Liste (`ul`) enthält die klickbaren Einträge. 3. Ein JavaScript-Event-Listener wird hinzugefügt, der bei jeder Eingabe im Suchfeld die Liste filtert. Die Einträge, die nicht mit dem Suchbegriff übereinstimmen, werden ausgeblendet. Du kannst dieses Beispiel anpassen, um es an deine spezifischen Anforderungen anzupassen.

Question 2

Suchmaske für dynamische Suche in HTML-Liste erstellen.

Answer

Um eine Suchmaske zu erstellen, die es ermöglicht, dynamisch in einer langen klickbaren Liste von Links zu suchen, kannst du JavaScript verwenden. Hier ist ein einfaches Beispiel, wie du das umse... [mehr]

Answer

Um eine Suchmaske zu erstellen, die es ermöglicht, dynamisch in einer langen klickbaren Liste von Links zu suchen, kannst du JavaScript verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: 1. **HTML-Struktur**: Erstelle eine Liste von Links und ein Eingabefeld für die Suche. ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Suchmaske für Links</title> <style> #linkList { list-style-type: none; padding: 0; } #linkList li { margin: 5px 0; } </style> </head> <body> <h1>Link-Suchmaske</h1> <input type="text" id="searchInput" placeholder="Suche nach Links..." onkeyup="filterLinks()"> <ul id="linkList"> <li><a href="https://example1.com">Beispiel Link 1</a></li> <li><a href="https://example2.com">Beispiel Link 2</a></li> <li><a href="https://example3.com">Beispiel Link 3</a></li> <li><a href="https://example4.com">Beispiel Link 4</a></li> <li><a href="https://example5.com">Beispiel Link 5</a></li> </ul> <script> function filterLinks() { const input = document.getElementById('searchInput'); const filter = input.value.toLowerCase(); const ul = document.getElementById("linkList"); const li = ul.getElementsByTagName('li'); for (let i = 0; i < li.length; i++) { const a = li[i].getElementsByTagName("a")[0]; const txtValue = a.textContent || a.innerText; if (txtValue.toLowerCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html> ``` 2. **Funktionsweise**: - Das Eingabefeld hat ein `onkeyup`-Ereignis, das die Funktion `filterLinks()` aufruft, wenn der Benutzer tippt. - Die Funktion `filterLinks()` durchsucht die Liste der Links und zeigt nur die Links an, die den Suchbegriff enthalten. 3. **Styling**: Du kannst das Styling nach Belieben anpassen, um das Aussehen der Liste und der Suchmaske zu verbessern. Mit diesem Ansatz kannst du eine einfache und effektive Suchmaske für deine Liste von Links erstellen.

2 Fragen zu Suchmaske

Fragen und Antworten zum Thema Suchmaske

Wie realisiere ich eine Suchmaske für eine HTML-Liste?

Suchmaske für dynamische Suche in HTML-Liste erstellen.