Update search-results.php

Reviewed-on: #51

content/search-results.php

@@ -5,17 +5,47 @@ if (session_status() === PHP_SESSION_NONE) {
 
 $all_results = $_SESSION["search_results"] ?? [];
 $query       = $_SESSION["search_query"] ?? "";
-$totalResultsCount = count($all_results);
+
+// ---------------------------------------------------------------
+// Parameter aus der URL lesen & validieren
+// ---------------------------------------------------------------
+$allowedCategories = [
+        'all', 'Deutsch', 'Englisch', 'Franzoesisch', 'Latein', 'Literatur',
+        'Mathematik', 'Biologie', 'Informatik', 'Chemie', 'Physik', 'Astronomie',
+        'Geschichte', 'Erdkunde', 'Sozialkunde', 'Wirtschaftskunde', 'Religion',
+        'Ethikunterricht', 'Philosophie', 'Psychologie', 'Kunst', 'Musik',
+        'Theater', 'Technik', 'Werken', 'Hauswirtschaft', 'Sport',
+];
+
+$category = $_GET['category'] ?? 'all';
+if (!in_array($category, $allowedCategories, true)) {
+    $category = 'all';
+}
 
 $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
-if (!in_array($limit, [10, 20, 50, 100])) {
+if (!in_array($limit, [10, 20, 50, 100], true)) {
     $limit = 10;
 }
 
-// Gesamtseitenzahl
-$totalPages = max(1, ceil($totalResultsCount / $limit));
+$currentSort = $_SESSION['search_sort'] ?? 'alphabet';
+
+// ---------------------------------------------------------------
+// Diese Berechnung ist der Server-seitige Fallback für Nutzer ohne
+// JavaScript. Sobald JS aktiv ist, übernimmt js/search-results.js
+// Filterung, Sortierung und Pagination komplett im Browser (auf
+// Basis des unten eingebetteten JSON-Datensatzes) und überschreibt
+// diese Ausgabe live, ohne dass eine neue Seite geladen wird.
+// ---------------------------------------------------------------
+$filteredResults = $all_results;
+if ($category !== 'all') {
+    $filteredResults = array_values(array_filter($filteredResults, function ($item) use ($category) {
+        return ($item['category'] ?? '') === $category;
+    }));
+}
+
+$totalResultsCount = count($filteredResults);
+$totalPages = max(1, (int)ceil($totalResultsCount / $limit));
 
-// Aktuelle Seite auslesen und validieren
 $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
 if ($currentPage < 1) {
     $currentPage = 1;
@@ -23,42 +53,68 @@ if ($currentPage < 1) {
     $currentPage = $totalPages;
 }
 
-// Startpunkt im Array berechnen (Offset)
 $offset  = ($currentPage - 1) * $limit;
-
-// Nur die Ergebnisse für die aktuelle Seite ausschneiden
-//$results = array_slice($all_results, $offset, $limit);
-$results = $all_results;
+$results = array_slice($filteredResults, $offset, $limit);
 $resultCount = count($results);
 
+// Hilfsfunktion, um Pagination-Links zu bauen, die alle aktuellen
+// Parameter (q, sort, limit, category) beibehalten.
+function buildPageUrl(int $page, string $query, string $sort, int $limit, string $category): string
+{
+    $params = [
+            'pfad'     => 'search-results',
+            'q'        => $query,
+            'sort'     => $sort,
+            'limit'    => $limit,
+            'category' => $category,
+            'page'     => $page,
+    ];
+    return 'index.php?' . http_build_query($params);
+}
+
+// ---------------------------------------------------------------
+// JSON-Datensatz für die clientseitige Aufbereitung (Filter,
+// Sortierung, Pagination) durch js/search-results.js. Enthält ALLE
+// Treffer der Suche (unabhängig von Kategorie/Sortierung/Seite),
+// damit im Browser ohne weitere Serveranfragen gearbeitet werden kann.
+// ---------------------------------------------------------------
+$jsonItems = array_map(function ($item) {
+    $likes = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
+    return [
+            'id'          => $item['id'] ?? null,
+            'title'       => $item['title'] ?? '',
+            'author'      => $item['author'] ?? '',
+            'category'    => $item['category'] ?? '',
+            'likes'       => $likes,
+            'creationDate'=> $item['creationDate'] ?? '',
+    ];
+}, $all_results);
 ?>
 <noscript>
-    Bitte JavaScript aktivieren!
+    Bitte JavaScript aktivieren, um die volle Funktionalität (Live-Filterung ohne Neuladen) zu nutzen. Die Seite funktioniert auch ohne JavaScript – Sortierung, Filterung und Seitenwechsel erfolgen dann über die Formular- bzw. Link-Auswahl.
 </noscript>
 <!--
  Seite: Suchergebnisse
  Inhalt: Zeigt die Ergebnisse einer Suche an
 -->
 <div class="s-res-layout-grid">
-    <?php include_once "includes/alertMessages.php"?>
-
+    <?php include_once "includes/alertMessages.php" ?>
     <!-- Links: Seitenleiste für Filter und Suche -->
     <aside class="s-res-sidebar">
+        <!-- Sortierfuntion Box und Such Box -->
+        <form action="php/controller/search-results-controller.php" method="GET" id="searchform-id" class="s-res-sidebar-form">
 
-    <!-- Sortierfuntion Box und Such Box-->
-        <form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
-            
-            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
+            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo (int)$currentPage; ?>">
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Suche anpassen</h3>
-                <input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
+                <input type="search" id="site-search" name="q" placeholder="Suchen..."
+                       class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
                 <button type="submit" class="nav__search-button">Suchen</button>
             </div>
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Sortierung</h3>
-                <?php $currentSort = $_SESSION['search_sort'] ?? 'alphabet'; ?>
                 <div class="s-res-filter-group">
                     <label class="s-res-filter-option">
                         <input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
@@ -81,55 +137,36 @@ $resultCount = count($results);
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Kategorie filtern</h3>
-                <select id="category-filter" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
-                    <option value="all">Alle Kategorien</option>
-                    <option value="Deutsch">Deutsch</option>
-                    <option value="Englisch">Englisch</option>
-                    <option value="Franzoesisch">Französisch</option>
-                    <option value="Latein">Latein</option>
-                    <option value="Literatur">Literatur</option>
-                    <option value="Mathematik">Mathematik</option>
-                    <option value="Biologie">Biologie</option>
-                    <option value="Informatik">Informatik</option>
-                    <option value="Chemie">Chemie</option>
-                    <option value="Physik">Physik</option>
-                    <option value="Astronomie">Astronomie</option>
-                    <option value="Geschichte">Geschichte</option>
-                    <option value="Erdkunde">Erdkunde</option>
-                    <option value="Sozialkunde">Sozialkunde</option>
-                    <option value="Wirtschaftskunde">Wirtschaftskunde</option>
-                    <option value="Religion">Religion</option>
-                    <option value="Ethikunterricht">Ethikunterricht</option>
-                    <option value="Philosophie">Philosophie</option>
-                    <option value="Psychologie">Psychologie</option>
-                    <option value="Kunst">Kunst</option>
-                    <option value="Musik">Musik</option>
-                    <option value="Theater">Theater</option>
-                    <option value="Technik">Technik</option>
-                    <option value="Werken">Werken</option>
-                    <option value="Hauswirtschaft">Hauswirtschaft</option>
-                    <option value="Sport">Sport</option>
+                <select id="category-filter" name="category" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
+                    <?php foreach ($allowedCategories as $catValue):
+                        $label = $catValue === 'all' ? 'Alle Kategorien' : ($catValue === 'Franzoesisch' ? 'Französisch' : $catValue);
+                        ?>
+                        <option value="<?php echo htmlspecialchars($catValue); ?>" <?php echo $category === $catValue ? 'selected' : ''; ?>>
+                            <?php echo htmlspecialchars($label); ?>
+                        </option>
+                    <?php endforeach; ?>
                 </select>
             </div>
 
+            <!-- Für Nutzer ohne JavaScript: expliziter Button, um Sortierung/Kategorie anzuwenden -->
+            <noscript>
+                <button type="submit" class="nav__search-button">Filter anwenden</button>
+            </noscript>
         </form>
-
     </aside>
 
     <main class="s-res-main-content">
-
         <div class="s-res-header">
             <h1 class="s-res-main-title">Suchergebnisse</h1>
-            <p class="s-res-meta"><?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
+            <p class="s-res-meta" data-query="<?php echo htmlspecialchars($query); ?>">
+                <?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"
+            </p>
         </div>
 
-        <!-- Ergebnisliste -->
+        <!-- Ergebnisliste: serverseitig gerendert (No-JS-Fallback). Wird bei aktivem JS durch js/search-results.js live ersetzt. -->
         <div class="s-res-list">
-            <?php 
-            if (!empty($results)): ?>
-    
+            <?php if (!empty($results)): ?>
                 <?php foreach ($results as $item):
-                    // Anzahl der Likes ermitteln (falls es ein Array ist, zählen; falls Zahl, direkt nutzen)
                     $likesCount = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
                     ?>
                     <div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
@@ -141,35 +178,25 @@ $resultCount = count($results);
                             </h2>
                             <div class="s-res-meta-row">
                                 <p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($item['author']); ?></span></p>
-
-                                <span class="s-res-likes">
-                                    ❤️ <?php echo $likesCount; ?>
-                                </span>
+                                <span class="s-res-likes"> ❤️ <?php echo $likesCount; ?></span>
                             </div>
                         </div>
                         <div class="s-res-arrow">&rarr;</div>
                     </div>
                 <?php endforeach; ?>
-
-            <?php 
-            elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
+            <?php elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
                 <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
-            <?php 
-            elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
+            <?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
                 <p>Unzulässige Suchanfrage</p>
-                
             <?php endif; ?>
-            <?php
-            unset($_SESSION["message"]);
-            ?>
-
+            <?php unset($_SESSION["message"]); ?>
         </div>
-        <div class="s-res-pagination-footer">
 
+        <div class="s-res-pagination-footer">
             <!-- Auswahl der Ergebnisse pro Seite -->
             <div class="s-res-limit-selector">
                 <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
-                <select id="s-res-per-page" name="limit" class="s-res-limit-select">
+                <select id="s-res-per-page" name="limit" form="searchform-id" class="s-res-limit-select">
                     <option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
                     <option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
                     <option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
@@ -177,15 +204,29 @@ $resultCount = count($results);
                 </select>
             </div>
 
+            <!-- No-JS-Fallback: echte Links, die serverseitig neu paginieren -->
             <div class="s-res-page-navigation">
-                <button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
+                <?php if ($currentPage > 1): ?>
+                    <a class="s-res-page-btn" href="<?php echo htmlspecialchars(buildPageUrl($currentPage - 1, $query, $currentSort, $limit, $category)); ?>">&laquo;</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn" aria-disabled="true">&laquo;</span>
+                <?php endif; ?>
 
-                <span id="dynamic-page-numbers"></span>
+                <span id="dynamic-page-numbers">Seite <?php echo $currentPage; ?> von <?php echo $totalPages; ?></span>
 
-                <button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
+                <?php if ($currentPage < $totalPages): ?>
+                    <a class="s-res-page-btn" href="<?php echo htmlspecialchars(buildPageUrl($currentPage + 1, $query, $currentSort, $limit, $category)); ?>">&raquo;</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn" aria-disabled="true">&raquo;</span>
+                <?php endif; ?>
             </div>
-
         </div>
     </main>
-
 </div>
+
+<!-- Vollständiger, ungefilterter Ergebnis-Datensatz für die clientseitige
+     Filterung/Sortierung/Pagination (siehe js/search-results.js).
+     JSON_HEX_* verhindert das Ausbrechen aus dem <script>-Tag bzw. XSS. -->
+<script type="application/json" id="s-res-data">
+<?php echo json_encode($jsonItems, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); ?>
+</script>

index.php

@@ -65,11 +65,12 @@ if ($pfad === "deleteAccount") {
         <link rel="stylesheet" href="css/message.css">
         <link rel="stylesheet" href="css/showCategory.css">
 
-        <script src="js/paginator.js" async></script>
-        <script src="js/sorter.js" async></script>
+        <!--<script src="js/paginator.js" async></script>
+        <script src="js/sorter.js" async></script>-->
         <script src="js/comments.js" defer></script>
         <script src="js/editor.js" async></script>
-        <script src="js/filter.js" async></script>
+        <!--<script src="js/filter.js" async></script>-->
+        <script src="js/search-results.js" async></script>
 
         <title>EduForge</title>
     </head>

js/editor.js

@@ -1,13 +1,13 @@
-console.log("Die JavaScript-Datei wurde erfolgreich geladen!");
+console.log("editor.js wurde erfolgreich geladen!");
 
 function initEditor() {
     const form = document.getElementById("editor-form");
 
     if (!form) {
-        console.error("Skript abgebrochen: Formular nicht gefunden!");
+        console.error("editor.js wurde abgebrochen: Formular nicht gefunden!");
         return;
     } else {
-        console.log("Formular gefunden und Editor initialisiert:", form);
+        console.log("Formular gefunden und editor.js initialisiert:", form);
     }
 
     const container = document.getElementById("block-container");

js/paginator.js

@@ -1,27 +1,203 @@
-function initPaginator() {
-    const form = document.getElementById('search-form-id');
-    const pageInput = document.getElementById('s-res-page-input');
-    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
+/**
+ * Übernimmt Filterung (Kategorie), Sortierung und Pagination der
+ * Suchergebnisse vollständig clientseitig, ohne Neuladen der Seite.
+ *
+ * Voraussetzung: Im HTML liegt ein <script type="application/json" id="s-res-data">
+ * mit allen Treffern der aktuellen Suche (siehe content/search-results.php).
+ *
+ * Ist kein JavaScript aktiv, bleibt die serverseitig gerenderte Ausgabe
+ * (inkl. echter Pagination-Links und Formular-Submit) unverändert nutzbar.
+ */
+(function () {
+    const DEFAULT_PER_PAGE = 10;
 
-    pageButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            if (this.disabled) return;
+    const state = {
+        all: [],
+        filtered: [],
+        category: 'all',
+        sort: 'alphabet',
+        perPage: DEFAULT_PER_PAGE,
+        page: 1,
+    };
 
-            const targetPage = this.getAttribute('data-page');
+    const els = {};
 
-            if (targetPage && form && pageInput) {
-                pageInput.value = targetPage;
-                form.submit();
+    function init() {
+        const dataScript = document.getElementById('s-res-data');
+        const listContainer = document.querySelector('.s-res-list');
+        if (!dataScript || !listContainer) {
+            return; // keine Ergebnisliste auf dieser Seite vorhanden
         }
-        });
-    });
-}
 
-// ist das DOM bereits vollständig aufgebaut?
-if (document.readyState === 'loading') {
-    // Falls noch geladen wird, auf das Event warten
-    document.addEventListener('DOMContentLoaded', initPaginator);
-} else {
-    // Falls das HTML bereits komplett da ist, sofort ausführen
-    initPaginator();
-}
+        try {
+            state.all = JSON.parse(dataScript.textContent);
+        } catch (e) {
+            console.error('Suchergebnis-Daten konnten nicht gelesen werden.', e);
+            return;
+        }
+
+        els.list = listContainer;
+        els.categorySelect = document.getElementById('category-filter');
+        els.perPageSelect = document.getElementById('s-res-per-page');
+        els.sortRadios = document.querySelectorAll('.sort-radio');
+        els.pagerContainer = document.querySelector('.s-res-page-navigation');
+        els.metaCount = document.querySelector('.s-res-meta');
+
+        // Ausgangszustand aus dem serverseitig gerenderten Markup übernehmen,
+        // damit Browser-zurück / geteilte Links konsistent bleiben.
+        if (els.categorySelect) state.category = els.categorySelect.value || 'all';
+        if (els.perPageSelect) state.perPage = parseInt(els.perPageSelect.value, 10) || DEFAULT_PER_PAGE;
+        const checkedSort = document.querySelector('.sort-radio:checked');
+        if (checkedSort) state.sort = checkedSort.value;
+
+        // Ab hier übernimmt JS: Formular-Steuerelemente lösen keinen
+        // Seiten-Reload mehr aus, sondern rendern direkt neu.
+        if (els.categorySelect) {
+            els.categorySelect.addEventListener('change', function () {
+                state.category = this.value;
+                state.page = 1;
+                render();
+            });
+        }
+        if (els.perPageSelect) {
+            els.perPageSelect.addEventListener('change', function () {
+                state.perPage = parseInt(this.value, 10) || DEFAULT_PER_PAGE;
+                state.page = 1;
+                render();
+            });
+        }
+        els.sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.page = 1;
+                render();
+            });
+        });
+
+        render();
+    }
+
+    function sortItems(items, sortValue) {
+        const copy = items.slice();
+        switch (sortValue) {
+            case 'likes':
+                copy.sort(function (a, b) { return (b.likes || 0) - (a.likes || 0); });
+                break;
+            case 'newest':
+                copy.sort(function (a, b) { return (b.creationDate || '').localeCompare(a.creationDate || ''); });
+                break;
+            case 'oldest':
+                copy.sort(function (a, b) { return (a.creationDate || '').localeCompare(b.creationDate || ''); });
+                break;
+            case 'alphabet':
+            default:
+                copy.sort(function (a, b) { return a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }); });
+                break;
+        }
+        return copy;
+    }
+
+    function render() {
+        let items = state.all;
+        if (state.category && state.category !== 'all') {
+            items = items.filter(function (it) {
+                return (it.category || '').toLowerCase() === state.category.toLowerCase();
+            });
+        }
+        state.filtered = sortItems(items, state.sort);
+
+        const totalResults = state.filtered.length;
+        const totalPages = Math.max(1, Math.ceil(totalResults / state.perPage));
+        if (state.page > totalPages) state.page = totalPages;
+        if (state.page < 1) state.page = 1;
+
+        const start = (state.page - 1) * state.perPage;
+        const pageItems = state.filtered.slice(start, start + state.perPage);
+
+        renderList(pageItems);
+        renderPager(totalPages);
+        renderMeta(totalResults);
+    }
+
+    function renderList(items) {
+        els.list.innerHTML = '';
+
+        if (items.length === 0) {
+            const p = document.createElement('p');
+            p.textContent = 'Keine Beiträge zu diesem Suchbegriff gefunden.';
+            els.list.appendChild(p);
+            return;
+        }
+
+        items.forEach(function (item) {
+            const div = document.createElement('div');
+            div.className = 's-res-item';
+            div.setAttribute('data-likes', item.likes || 0);
+            div.setAttribute('data-category', (item.category || '').toLowerCase());
+
+            div.innerHTML =
+                '<div class="s-res-content">' +
+                '<h2 class="s-res-item-title">' +
+                '<a class="s-res-link"></a>' +
+                '</h2>' +
+                '<div class="s-res-meta-row">' +
+                '<p class="s-res-author">Von: <span class="s-res-author-name"></span></p>' +
+                '<span class="s-res-likes"></span>' +
+                '</div>' +
+                '</div>' +
+                '<div class="s-res-arrow">&rarr;</div>';
+
+            const link = div.querySelector('.s-res-link');
+            link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+            link.textContent = item.title;
+            div.querySelector('.s-res-author-name').textContent = item.author;
+            div.querySelector('.s-res-likes').textContent = item.likes || 0;
+
+            els.list.appendChild(div);
+        });
+    }
+
+    function renderPager(totalPages) {
+        if (!els.pagerContainer) return;
+        els.pagerContainer.innerHTML = '';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = 's-res-page-btn';
+        prevBtn.textContent = '\u00AB';
+        prevBtn.disabled = state.page <= 1;
+        prevBtn.addEventListener('click', function () { goToPage(state.page - 1); });
+        els.pagerContainer.appendChild(prevBtn);
+
+        const span = document.createElement('span');
+        span.id = 'dynamic-page-numbers';
+        span.textContent = 'Seite ' + state.page + ' von ' + totalPages;
+        els.pagerContainer.appendChild(span);
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = 's-res-page-btn';
+        nextBtn.textContent = '\u00BB';
+        nextBtn.disabled = state.page >= totalPages;
+        nextBtn.addEventListener('click', function () { goToPage(state.page + 1); });
+        els.pagerContainer.appendChild(nextBtn);
+    }
+
+    function renderMeta(totalResults) {
+        if (!els.metaCount) return;
+        const query = els.metaCount.getAttribute('data-query') || '';
+        els.metaCount.textContent = totalResults + ' Treffer für Ihre Suchanfrage "' + query + '"';
+    }
+
+    function goToPage(page) {
+        state.page = page;
+        render();
+        els.list.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

js/search-results.js

@@ -0,0 +1,203 @@
+/**
+ * Übernimmt Filterung (Kategorie), Sortierung und Pagination der
+ * Suchergebnisse vollständig clientseitig, ohne Neuladen der Seite.
+ *
+ * Voraussetzung: Im HTML liegt ein <script type="application/json" id="s-res-data">
+ * mit allen Treffern der aktuellen Suche (siehe content/search-results.php).
+ *
+ * Ist kein JavaScript aktiv, bleibt die serverseitig gerenderte Ausgabe
+ * (inkl. echter Pagination-Links und Formular-Submit) unverändert nutzbar.
+ */
+(function () {
+    const DEFAULT_PER_PAGE = 10;
+
+    const state = {
+        all: [],
+        filtered: [],
+        category: 'all',
+        sort: 'alphabet',
+        perPage: DEFAULT_PER_PAGE,
+        page: 1,
+    };
+
+    const els = {};
+
+    function init() {
+        const dataScript = document.getElementById('s-res-data');
+        const listContainer = document.querySelector('.s-res-list');
+        if (!dataScript || !listContainer) {
+            return; // keine Ergebnisliste auf dieser Seite vorhanden
+        }
+
+        try {
+            state.all = JSON.parse(dataScript.textContent);
+        } catch (e) {
+            console.error('Suchergebnis-Daten konnten nicht gelesen werden.', e);
+            return;
+        }
+
+        els.list = listContainer;
+        els.categorySelect = document.getElementById('category-filter');
+        els.perPageSelect = document.getElementById('s-res-per-page');
+        els.sortRadios = document.querySelectorAll('.sort-radio');
+        els.pagerContainer = document.querySelector('.s-res-page-navigation');
+        els.metaCount = document.querySelector('.s-res-meta');
+
+        // Ausgangszustand aus dem serverseitig gerenderten Markup übernehmen,
+        // damit Browser-zurück / geteilte Links konsistent bleiben.
+        if (els.categorySelect) state.category = els.categorySelect.value || 'all';
+        if (els.perPageSelect) state.perPage = parseInt(els.perPageSelect.value, 10) || DEFAULT_PER_PAGE;
+        const checkedSort = document.querySelector('.sort-radio:checked');
+        if (checkedSort) state.sort = checkedSort.value;
+
+        // Ab hier übernimmt JS: Formular-Steuerelemente lösen keinen
+        // Seiten-Reload mehr aus, sondern rendern direkt neu.
+        if (els.categorySelect) {
+            els.categorySelect.addEventListener('change', function () {
+                state.category = this.value;
+                state.page = 1;
+                render();
+            });
+        }
+        if (els.perPageSelect) {
+            els.perPageSelect.addEventListener('change', function () {
+                state.perPage = parseInt(this.value, 10) || DEFAULT_PER_PAGE;
+                state.page = 1;
+                render();
+            });
+        }
+        els.sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.page = 1;
+                render();
+            });
+        });
+
+        render();
+    }
+
+    function sortItems(items, sortValue) {
+        const copy = items.slice();
+        switch (sortValue) {
+            case 'likes':
+                copy.sort(function (a, b) { return (b.likes || 0) - (a.likes || 0); });
+                break;
+            case 'newest':
+                copy.sort(function (a, b) { return (b.creationDate || '').localeCompare(a.creationDate || ''); });
+                break;
+            case 'oldest':
+                copy.sort(function (a, b) { return (a.creationDate || '').localeCompare(b.creationDate || ''); });
+                break;
+            case 'alphabet':
+            default:
+                copy.sort(function (a, b) { return a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }); });
+                break;
+        }
+        return copy;
+    }
+
+    function render() {
+        let items = state.all;
+        if (state.category && state.category !== 'all') {
+            items = items.filter(function (it) {
+                return (it.category || '').toLowerCase() === state.category.toLowerCase();
+            });
+        }
+        state.filtered = sortItems(items, state.sort);
+
+        const totalResults = state.filtered.length;
+        const totalPages = Math.max(1, Math.ceil(totalResults / state.perPage));
+        if (state.page > totalPages) state.page = totalPages;
+        if (state.page < 1) state.page = 1;
+
+        const start = (state.page - 1) * state.perPage;
+        const pageItems = state.filtered.slice(start, start + state.perPage);
+
+        renderList(pageItems);
+        renderPager(totalPages);
+        renderMeta(totalResults);
+    }
+
+    function renderList(items) {
+        els.list.innerHTML = '';
+
+        if (items.length === 0) {
+            const p = document.createElement('p');
+            p.textContent = 'Keine Beiträge zu diesem Suchbegriff gefunden.';
+            els.list.appendChild(p);
+            return;
+        }
+
+        items.forEach(function (item) {
+            const div = document.createElement('div');
+            div.className = 's-res-item';
+            div.setAttribute('data-likes', item.likes || 0);
+            div.setAttribute('data-category', (item.category || '').toLowerCase());
+
+            div.innerHTML =
+                '<div class="s-res-content">' +
+                '<h2 class="s-res-item-title">' +
+                '<a class="s-res-link"></a>' +
+                '</h2>' +
+                '<div class="s-res-meta-row">' +
+                '<p class="s-res-author">Von: <span class="s-res-author-name"></span></p>' +
+                '<span class="s-res-likes"></span>' +
+                '</div>' +
+                '</div>' +
+                '<div class="s-res-arrow">&rarr;</div>';
+
+            const link = div.querySelector('.s-res-link');
+            link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+            link.textContent = item.title;
+            div.querySelector('.s-res-author-name').textContent = item.author;
+            div.querySelector('.s-res-likes').textContent = item.likes || 0;
+
+            els.list.appendChild(div);
+        });
+    }
+
+    function renderPager(totalPages) {
+        if (!els.pagerContainer) return;
+        els.pagerContainer.innerHTML = '';
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = 's-res-page-btn';
+        prevBtn.textContent = '\u00AB';
+        prevBtn.disabled = state.page <= 1;
+        prevBtn.addEventListener('click', function () { goToPage(state.page - 1); });
+        els.pagerContainer.appendChild(prevBtn);
+
+        const span = document.createElement('span');
+        span.id = 'dynamic-page-numbers';
+        span.textContent = 'Seite ' + state.page + ' von ' + totalPages;
+        els.pagerContainer.appendChild(span);
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = 's-res-page-btn';
+        nextBtn.textContent = '\u00BB';
+        nextBtn.disabled = state.page >= totalPages;
+        nextBtn.addEventListener('click', function () { goToPage(state.page + 1); });
+        els.pagerContainer.appendChild(nextBtn);
+    }
+
+    function renderMeta(totalResults) {
+        if (!els.metaCount) return;
+        const query = els.metaCount.getAttribute('data-query') || '';
+        els.metaCount.textContent = totalResults + ' Treffer für Ihre Suchanfrage "' + query + '"';
+    }
+
+    function goToPage(page) {
+        state.page = page;
+        render();
+        els.list.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

php/controller/search-results-controller.php

@@ -8,45 +8,43 @@ require_once '../model/Article.php';
 require_once '../validator/search-validator.php';
 
 if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
-
     $search = trim($_GET["q"]);
+
     if (!searchQueryValidator($search)) {
         $_SESSION["search_results"] = [];
         $_SESSION["search_query"] = "";
         $_SESSION["message"] = "invalid_search_query";
     } else {
         try {
-            
             $articleManager = ArticleManager::getInstance();
             $userManager    = UserManager::getInstance();
-            
             $results        = $articleManager->search($search);
 
             $sortStyle = $_GET['sort'] ?? 'alphabet';
             $_SESSION['search_sort'] = $sortStyle;
 
             if ($sortStyle === 'alphabet') {
-                // Titel aufsteigend alphabetiisch sortiert
+                // Titel aufsteigend alphabetisch sortiert
                 usort($results, function ($a, $b) {
                     return strcasecmp($a->getTitle(), $b->getTitle());
                 });
             } elseif ($sortStyle === 'likes') {
-                usort($results, function($a, $b) {
+                usort($results, function ($a, $b) {
                     return $b->getLikeCount() <=> $a->getLikeCount();
                 });
             } elseif ($sortStyle === 'newest') {
                 // Datum neu zu alt sortiert
-                usort($results, function($a, $b) {
+                usort($results, function ($a, $b) {
                     return strcmp($b->getCreationDate(), $a->getCreationDate());
                 });
             } elseif ($sortStyle === 'oldest') {
                 // Datum alt zu neu sortiert
-                usort($results, function($a, $b) {
+                usort($results, function ($a, $b) {
                     return strcmp($a->getCreationDate(), $b->getCreationDate());
                 });
             }
 
-            // Ergebnisse werden in ein flaches array umgewandelt, da sont incomplete-PHP error im Ergebnis
+            // Ergebnisse werden in ein flaches Array umgewandelt, da sonst incomplete-PHP-Fehler im Ergebnis
             $safeArrayResults = [];
             foreach ($results as $obj) {
                 $safeArrayResults[] = [
@@ -64,8 +62,7 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
             $_SESSION["search_results"] = $safeArrayResults;
             $_SESSION["search_query"] = $search;
             $_SESSION["message"] = "new_search_results";
-
-        } catch (Exception $e){
+        } catch (Exception $e) {
             $_SESSION["message"] = "internal_error";
         }
     }
@@ -76,9 +73,17 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
         $limit = 10;
     }
     $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=" . $page);
+
+    // Kategorie-Filter durchreichen (Whitelist-Prüfung erfolgt in der View)
+    $category = isset($_GET['category']) ? $_GET['category'] : 'all';
+
+    header(
+        "Location: ../../index.php?pfad=search-results&q=" . urlencode($search) .
+        "&sort=" . urlencode($sort) .
+        "&limit=" . $limit .
+        "&category=" . urlencode($category) .
+        "&page=" . $page
+    );
     exit();
-    
 }
-
 ?>