feat: add active search example

internal/server/routes.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/gofs-cli/template/internal/server/assets"
 	"github.com/gofs-cli/template/internal/server/handlers"
+	activesearch "github.com/gofs-cli/template/internal/ui/pages/active-search"
 	bulkupdate "github.com/gofs-cli/template/internal/ui/pages/bulk-update"
 	clicktoedit "github.com/gofs-cli/template/internal/ui/pages/click-to-edit"
 	clicktoload "github.com/gofs-cli/template/internal/ui/pages/click-to-load"
@@ -51,6 +52,10 @@ func (s *Server) Routes() {
 	routesMux.Handle("POST /inline-validation", inlinevalidation.Submit())
 	routesMux.Handle("POST /inline-validation/email", inlinevalidation.Validate())
 
+	// active search example
+	routesMux.Handle("GET /active-search", activesearch.Index())
+	routesMux.Handle("POST /active-search/search", activesearch.Search())
+
 	routesMux.Handle("GET /modal", home.Modal())
 
 	routesMux.Handle("GET /page1", page1.Index())

internal/ui/pages/active-search/handlers.go

@@ -0,0 +1,61 @@
+package activesearch
+
+import (
+	"net/http"
+	"strings"
+
+	"github.com/a-h/templ"
+	"github.com/gofs-cli/template/internal/ui"
+	"github.com/gofs-cli/template/internal/ui/components/header"
+)
+
+func Index() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		templ.Handler(ui.IndexPage(layout(header.Header(), body()))).ServeHTTP(w, r)
+	})
+}
+
+var rows = []Row{
+	{
+		FirstName: "Rick",
+		LastName:  "Grimes",
+		Email:     "rick.grimes@email.com",
+	},
+	{
+		FirstName: "Thomas",
+		LastName:  "Shelby",
+		Email:     "thomas.shelby@email.com",
+	},
+	{
+		FirstName: "Harvey",
+		LastName:  "Specter",
+		Email:     "harvey.specter@email.com",
+	},
+	{
+		FirstName: "Rick",
+		LastName:  "Astley",
+		Email:     "rick.astley@email.com",
+	},
+	{
+		FirstName: "Thomas",
+		LastName:  "cook",
+		Email:     "thomas.cook@email.com",
+	},
+}
+
+func Search() http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		searchQuery := strings.ToLower(r.PostFormValue("search"))
+		filteredRows := []Row{}
+		for _, v := range rows {
+			if contains(v.FirstName, searchQuery) || contains(v.LastName, searchQuery) || contains(v.Email, searchQuery) {
+				filteredRows = append(filteredRows, v)
+			}
+		}
+		templ.Handler(searchResults(filteredRows)).ServeHTTP(w, r)
+	})
+}
+
+func contains(str, substr string) bool {
+	return strings.Contains(strings.ToLower(str), substr)
+}

internal/ui/pages/active-search/index.templ

@@ -0,0 +1,61 @@
+package activesearch
+
+type Row struct {
+	FirstName string
+	LastName  string
+	Email     string
+}
+
+css classLayout() {
+	display: grid;
+}
+
+templ layout(header, body templ.Component) {
+	<main class={ classLayout() }>
+		<div>
+			@header
+		</div>
+		<div>
+			@body
+		</div>
+	</main>
+}
+
+templ body() {
+	<h2>Active Search:</h2>
+	<h3>
+		Search Contacts
+		<span class="htmx-indicator">
+			<img src="/img/bars.svg"/> Searching...
+		</span>
+	</h3>
+	<input
+		type="search"
+		name="search"
+		placeholder="Begin Typing To Search Users..."
+		hx-post="/active-search/search"
+		hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+		hx-target="#search-results"
+		hx-indicator=".htmx-indicator"
+	/>
+	<table class="table">
+		<thead>
+			<tr>
+				<th>First Name</th>
+				<th>Last Name</th>
+				<th>Email</th>
+			</tr>
+		</thead>
+		<tbody id="search-results"></tbody>
+	</table>
+}
+
+templ searchResults(rows []Row) {
+	for _, v := range rows {
+		<tr>
+			<td>{ v.FirstName }</td>
+			<td>{ v.LastName }</td>
+			<td>{ v.Email }</td>
+		</tr>
+	}
+}