henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Merge branch '114-suchleiste-vorschlage-anzeigen' into 'master'

Browse Source 
Resolve "Suchleiste - Vorschläge anzeigen!"

Closes #114

See merge request enrichment-2024/qivip!70
This commit is contained in:
ben8
2025-05-10 10:53:30 +00:00
parent 8133eaa439 0062f88167
commit c014003062
6 changed files with 91 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
django/templates/partials/_nav.html
View File

@@ -11,7 +11,7 @@
<!-- Desktop Search (centered on screen) - Hidden on mobile -->
<div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40">
<form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
<input id="quiz-search-desktop" list="quiz-names-desktop" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
<button class="py-1 text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
@@ -53,7 +53,7 @@
<!-- Search in mobile menu -->
<form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
<div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
<input type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
<input id="quiz-search-mobile" list="quiz-names-mobile" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
<button class="text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -63,6 +63,78 @@
</svg>
</button>
</div>
<datalist id="quiz-names-desktop">
{% for quiz in quiz_names %}
<option value="{{ quiz.name }}">
{% endfor %}
</datalist>
<datalist id="quiz-names-mobile">
{% for quiz in quiz_names %}
<button value="{{ quiz.name }}" onclick="performSearch(this.value)"><option value="{{ quiz.name }}" ></option></button>
{% endfor %}
</datalist>
{{ quiz_names|json_script:"quiz-names-data" }}
<script>
async function fetchQuizNames() {
try {
const response = await fetch("{% url 'library:quiz_names_json' %}");
if (!response.ok) throw new Error("Netzwerkfehler");
const data = await response.json();
if (Array.isArray(data)) return data;
} catch (err) {
console.error("Fehler beim Laden der Quiz-Namen:", err);
}
return [];
}
function setupAutocomplete(inputId, datalistId, quizNames) {
const searchInput = document.getElementById(inputId);
const datalist = document.getElementById(datalistId);
if (!searchInput || !datalist) return;
// Wenn der Benutzer den Text ändert, Filter anwenden
searchInput.addEventListener('input', () => {
const value = searchInput.value.toLowerCase();
datalist.innerHTML = '';
quizNames
.filter(name => name.toLowerCase().includes(value))
.slice(0, 10)
.forEach(name => {
const option = document.createElement('option');
option.value = name;
datalist.appendChild(option);
});
});
}
// Funktion zum Durchführen der Suche
function performSearch(query) {
datalist.innerHTML = '';
// Hier kann deine Logik zur Verarbeitung der Suche eingefügt werden
// Falls du die Seite zu einer Suchergebnisseite weiterleiten möchtest:
window.location.href = `{% url 'library:overview_quiz' %}?search=${query}`;
}
document.addEventListener('DOMContentLoaded', async () => {
const quizNames = await fetchQuizNames();
setupAutocomplete('quiz-search-desktop', 'quiz-names-desktop', quizNames);
setupAutocomplete('quiz-search-mobile', 'quiz-names-mobile', quizNames);
});
</script>
</form>
<!-- Mobile Navigation Links -->