diff --git a/client/src/pages/search.tsx b/client/src/pages/search.tsx index 6407b0d..0495d82 100644 --- a/client/src/pages/search.tsx +++ b/client/src/pages/search.tsx @@ -1,5 +1,5 @@ import { useQuery } from "@tanstack/react-query"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { useLocation } from "wouter"; import { Link } from "wouter"; import { Search, Play, FileText, ArrowLeft } from "lucide-react"; @@ -30,6 +30,7 @@ export default function SearchPage() { const initialQuery = new URLSearchParams(qs).get("q") || ""; const [query, setQuery] = useState(initialQuery); const [searchTerm, setSearchTerm] = useState(initialQuery); + const debounceRef = useRef | null>(null); useEffect(() => { const q = new URLSearchParams(window.location.search).get("q") || ""; @@ -39,6 +40,16 @@ export default function SearchPage() { } }, [qs]); + const handleQueryChange = (val: string) => { + setQuery(val); + if (debounceRef.current) clearTimeout(debounceRef.current); + debounceRef.current = setTimeout(() => { + if (val.trim().length >= 2) { + setSearchTerm(val.trim()); + } + }, 500); + }; + const { data, isLoading } = useQuery({ queryKey: ["/api/search", searchTerm], queryFn: async () => { @@ -53,9 +64,9 @@ export default function SearchPage() { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); + if (debounceRef.current) clearTimeout(debounceRef.current); if (query.trim().length >= 2) { setSearchTerm(query.trim()); - navigate(`/search?q=${encodeURIComponent(query.trim())}`); } }; @@ -78,7 +89,7 @@ export default function SearchPage() { setQuery(e.target.value)} + onChange={(e) => handleQueryChange(e.target.value)} placeholder="Artikel, Videos, Künstler suchen..." className="w-full pl-12 pr-4 py-3 bg-card border border-card-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary text-base" autoFocus