suche.php

Code Hygiene Score: 100

Keine Issues gefunden.

Versionen 2

Code

<?php

declare(strict_types=1);

// @responsibility: View für semantische Suche mit HTMX Live-Search

ob_start();
?>

<nav class="breadcrumb">
    <a href="/">Campus KI</a> &raquo; <a href="/semantic-explorer">Semantic Explorer</a> &raquo; Suche
</nav>

<h1>Semantische Suche</h1>
<p>Vektor-basierte Suche in Nutzdaten (Qdrant documents Collection).</p>

<div class="search-form">
    <div class="form-group">
        <div class="search-input-wrapper">
            <input type="search"
                   id="search-input"
                   name="q"
                   value="<?= htmlspecialchars($query) ?>"
                   placeholder="Suchbegriff eingeben..."
                   class="search-input"
                   hx-get="/semantic-explorer/suche"
                   hx-trigger="keyup changed delay:300ms, search"
                   hx-target="#search-results"
                   hx-swap="innerHTML"
                   hx-include="#search-limit"
                   hx-indicator="#search-spinner"
                   hx-push-url="true"
                   autofocus>
            <span id="search-spinner" class="htmx-indicator spinner"></span>
        </div>
    </div>
    <div class="form-row">
        <select id="search-limit" name="limit"
                hx-get="/semantic-explorer/suche"
                hx-trigger="change"
                hx-target="#search-results"
                hx-swap="innerHTML"
                hx-include="#search-input"
                hx-push-url="true">
            <option value="5" <?= $limit === 5 ? 'selected' : '' ?>>5 Ergebnisse</option>
            <option value="10" <?= $limit === 10 ? 'selected' : '' ?>>10 Ergebnisse</option>
            <option value="20" <?= $limit === 20 ? 'selected' : '' ?>>20 Ergebnisse</option>
        </select>
    </div>
</div>

<div id="search-results">
    <?php require __DIR__ . '/partials/search-results.php'; ?>
</div>

<p class="links-bar">
    <a href="/semantic-explorer">Zurueck zum Explorer</a>
</p>

<style>
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.search-input-wrapper .spinner {
    position: absolute;
    right: 1rem;
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border, #ddd);
    border-top-color: var(--color-primary, #007bff);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>

<?php $content = ob_get_clean(); ?>
<?php require VIEW_PATH . '/layout.php'; ?>
← Übersicht