1 Frage zu Schlagwortsuche

Um eine Schlagwortsuche (Keyword-Suche) in einer Webanwendung auf Basis einer vorhandenen index.json zu realisieren, gehst du typischerweise wie folgt vor: **1. index.json einlesen** Lade die index.json-Datei in deine Webanwendung. Das geht z.B. mit `fetch` in JavaScript: ```javascript fetch('index.json') .then(response => response.json()) .then(data => { // data enthält jetzt dein Index-Array }); ``` **2. Datenstruktur verstehen** Schau dir an, wie die Daten in der index.json aufgebaut sind. Typisch ist ein Array von Objekten, z.B.: ```json [ { "id": 1, "titel": "Beispielartikel", "beschreibung": "Dies ist ein Beispieltext.", "schlagworte": ["Beispiel", "Artikel", "Test"] }, ... ] ``` **3. Suchfunktion implementieren** Erstelle eine Funktion, die die Daten nach einem oder mehreren Schlagworten filtert: ```javascript function sucheNachSchlagworten(daten, suchbegriff) { const begriff = suchbegriff.toLowerCase(); return daten.filter(eintrag => eintrag.schlagworte.some( schlagwort => schlagwort.toLowerCase().includes(begriff) ) ); } ``` **4. UI für die Suche bauen** Füge ein Eingabefeld und einen Button hinzu, um die Suche zu starten. Beispiel mit HTML: ```html <input type="text" id="suche" placeholder="Schlagwort eingeben"> <button onclick="starteSuche()">Suchen</button> <div id="ergebnisse"></div> ``` **5. Suchergebnisse anzeigen** Ergänze JavaScript, um die Ergebnisse darzustellen: ```javascript let daten = []; fetch('index.json') .then(response => response.json()) .then(json => daten = json); function starteSuche() { const suchbegriff = document.getElementById('suche').value; const ergebnisse = sucheNachSchlagworten(daten, suchbegriff); document.getElementById('ergebnisse').innerHTML = ergebnisse .map(e => `<div>${e.titel}</div>`) .join(''); } ``` **6. Optional: Mehrere Schlagworte unterstützen** Erweitere die Funktion, um mehrere Schlagworte (z.B. durch Kommas getrennt) zu unterstützen. **Zusammenfassung:** - index.json laden - Datenstruktur analysieren - Filterfunktion für Schlagworte schreiben - Suchfeld und Ergebnisanzeige im Frontend bauen Für komplexere Anforderungen (z.B. große Datenmengen, fuzzy search) kannst du Bibliotheken wie [Fuse.js](https://fusejs.io/) verwenden. **Tipp:** Achte auf die Performance bei großen Datenmengen und erwäge ggf. eine serverseitige Suche.