Suche: HTMX + Webseite

views/layouts/components/_menu.gohtml

@@ -1,6 +1,15 @@
 <div class="flex flex-row justify-center mt-8">
 	<div class="w-6/12">
-		<input type="search" placeholder="Suche" class="px-2.5 py-1.5 border w-full" />
+		<input
+			type="search"
+			name="q"
+			id="search"
+			placeholder="Suche"
+			class="px-2.5 py-1.5 border w-full"
+			hx-get="/suche/?noCache=true"
+			hx-trigger="input changed delay:200ms, keyup[key=='Enter']"
+			hx-select="main"
+			hx-target="main" />
 	</div>
 
 	<div x-data="{ open: false }">
@@ -28,3 +37,15 @@
 		</div>
 	</div>
 </div>
+
+<script>
+	document.body.addEventListener("htmx:configRequest", function (event) {
+		console.log("Before request event triggered");
+		let t = event.detail.elt; // Get the element triggering the request
+
+		if (t.id === "search" && t.value === "") {
+			event.detail.parameters = {};
+			event.detail.path = window.location.pathname + window.location.search;
+		}
+	});
+</script>

views/routes/ausgabe/body.gohtml

@@ -1,7 +1,7 @@
 {{ $model := .model }}
 {{ $date := .model.Datum.When }}
 <div>
-	<a href="/{{- $date.Year -}}">
+	<a href="/jahrgang/{{- $date.Year -}}">
 		Zum Jahr
 		{{ $date.Year }}
 	</a>

views/routes/body.gohtml

@@ -5,7 +5,7 @@
 	<div class="mx-auto flex flex-row gap-x-4 w-fit items-end leading-none">
 		{{ range $year := .model.AvailableYears }}
 			<a
-				href="/{{ $year }}"
+				href="/jahrgang/{{ $year }}"
 				class="no-underline leading-none !m-0 !p-0
 				{{ if eq $year $y }}text-2xl font-bold pointer-events-none" aria-current="page{{ end }}"
 				>{{ $year }}</a

views/routes/search/body.gohtml

@@ -0,0 +1,22 @@
+{{ $model := .model }}
+
+
+<div id="results">
+	{{ range $i, $agent := $model.Agents.Items }}
+		<div>
+			{{ $agent.String }}
+		</div>
+	{{ end }}
+
+	{{ range $i, $work := $model.Works.Items }}
+		<div>
+			{{ $work.String }}
+		</div>
+	{{ end }}
+
+	{{ range $i, $place := $model.Places.Items }}
+		<div>
+			{{ $place.String }}
+		</div>
+	{{ end }}
+</div>