localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search: real autocomplete previews + clearer placeholder

Browse Source 
PLACEHOLDER: "Search broadcast news…" → "Search articles, gear,
vendors". Drops the weird ellipsis and the "we're a broadcast site
so 'broadcast news' is redundant" feel.

API (/api/search/suggest):
- Match expanded from {title, author_name} to
  {title, excerpt, content, author_name} — surfaces hits when the
  phrase lives deep in the article body.
- Returns a snippet object {text, matchStart, matchEnd} sliced
  from the first hit (HTML-stripped), with ~80 chars of context on
  either side and "…" markers when truncated.
- Returns matched_in: 'title' | 'excerpt' | 'content' | 'author' so
  the UI can show "match in article body" / "match in byline".
- Returns date + author_name on each result.

UI dropdown (Header.tsx):
- Each suggestion now renders three rows:
  1) Title (bold) + category chip
  2) Snippet with the matched substring wrapped in <mark>
  3) Author byline + date + (if match wasn't in title) a tag
     showing where the match occurred
- Vertical stacking with a colored left-border on hover so the
  active suggestion is visible.

CSS:
- Stack item layout, snippet with -webkit-line-clamp:2 so long
  matches don't overflow.
- <mark> background uses the accent blue at 28% so the highlight
  reads against the dark card.
This commit is contained in:
Ryan Salazar
2026-05-20 16:22:04 +00:00
parent c1705e1a4b
commit 418027b469
3 changed files with 201 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Header.tsx
View File

@@ -37,7 +37,18 @@ export default function Header() {
const [mobileOpen, setMobileOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [searchFocused, setSearchFocused] = useState(false);
const [suggestions, setSuggestions] = useState<Array<{ slug: string; title: string; category?: string; href: string }>>([]);
const [suggestions, setSuggestions] = useState<
Array<{
slug: string;
title: string;
category?: string;
date?: string | null;
author_name?: string | null;
snippet?: { text: string; matchStart: number; matchEnd: number } | null;
matched_in?: "title" | "excerpt" | "content" | "author" | null;
href: string;
}>
>([]);
const [suggestOpen, setSuggestOpen] = useState(false);
const submitSearch = () => {
@@ -512,7 +523,7 @@ export default function Header() {
<input
ref={searchRef}
type="search"
placeholder="Search broadcast news…"
placeholder="Search articles, gear, vendors"
value={searchQuery}
onChange={(e) => setSearchQuery(e?.target?.value)}
onFocus={() => { setSearchFocused(true); if (suggestions.length > 0) setSuggestOpen(true); }}
@@ -547,18 +558,42 @@ export default function Header() {
id="bb-search-suggest"
role="listbox"
className="bb-browse-search-suggest">
{suggestions.map((s) => (
<li key={s.slug} role="option">
<Link
href={s.href}
className="bb-browse-search-suggest-item"
onMouseDown={(e) => e.preventDefault()}
onClick={() => { setSuggestOpen(false); setSearchQuery(""); }}>
<span className="bb-browse-search-suggest-title">{s.title}</span>
{s.category && <span className="bb-browse-search-suggest-cat">{s.category}</span>}
</Link>
</li>
))}
{suggestions.map((s) => {
const snippet = s.snippet;
const beforeMatch = snippet?.text.slice(0, snippet.matchStart) || "";
const matchText = snippet?.text.slice(snippet.matchStart, snippet.matchEnd) || "";
const afterMatch = snippet?.text.slice(snippet.matchEnd) || "";
return (
<li key={s.slug} role="option">
<Link
href={s.href}
className="bb-browse-search-suggest-item"
onMouseDown={(e) => e.preventDefault()}
onClick={() => { setSuggestOpen(false); setSearchQuery(""); }}>
<div className="bb-browse-search-suggest-row1">
<span className="bb-browse-search-suggest-title">{s.title}</span>
{s.category && <span className="bb-browse-search-suggest-cat">{s.category}</span>}
</div>
{snippet && s.matched_in !== "title" && (
<div className="bb-browse-search-suggest-snippet">
{beforeMatch}
<mark className="bb-browse-search-suggest-mark">{matchText}</mark>
{afterMatch}
</div>
)}
{(s.date || s.author_name) && (
<div className="bb-browse-search-suggest-meta">
{s.author_name && <span>{s.author_name}</span>}
{s.author_name && s.date && <span className="bb-dot">·</span>}
{s.date && <time>{s.date}</time>}
{s.matched_in === "author" && <span className="bb-browse-search-suggest-mark-tag">match in byline</span>}
{s.matched_in === "content" && <span className="bb-browse-search-suggest-mark-tag">match in article body</span>}
</div>
)}
</Link>
</li>
);
})}
<li role="option" className="bb-browse-search-suggest-all">
<button
type="button"