Europeana-Suche (Simulation)

Diese Anwendung simuliert eine Europeana-Suche mit inline Beispieldaten. Sie können nach Begriffen suchen, nach Typ filtern und die Ergebnisse als Bildergalerie durchstöbern. Der Code zeigt das typische Muster für die Arbeit mit API-ähnlichen Daten.

Code anzeigen: Wie funktioniert diese Anwendung? 
// 1. Suche ausfuehren
function suche() {
  const begriff = suchfeld.value.toLowerCase();
  const typ = typFilter.value;

  let ergebnisse = europeanaItems;

  // Nach Suchbegriff filtern
  if (begriff) {
    ergebnisse = ergebnisse.filter(item => {
      const titel = (item.title?.[0] || '').toLowerCase();
      const anbieter = (item.dataProvider?.[0] || '').toLowerCase();
      return titel.includes(begriff) || anbieter.includes(begriff);
    });
  }

  // Nach Typ filtern
  if (typ) {
    ergebnisse = ergebnisse.filter(item => item.type === typ);
  }

  // Sortieren
  ergebnisse = sortiere(ergebnisse);

  // Anzeigen
  zeigeErgebnisse(ergebnisse);
}

// 2. Ergebnisse als Galerie rendern
function zeigeErgebnisse(items) {
  container.innerHTML = items.map(item => `
    <div class="galerie-item">
      <img src="${item.edmPreview?.[0]}" alt="${item.title?.[0]}">
      <div class="info">
        <span class="typ-badge">${item.type}</span>
        <h3>${item.title?.[0]}</h3>
        <p class="meta">${item.year?.[0]} | ${item.dataProvider?.[0]}</p>
      </div>
    </div>
  `).join('');
}