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

search: return all matches (not just 100) + add typeahead autocomplete

Browse Source 
- searchLegacyArticles() default limit: 50 → 5000. /search page
    explicitly passes 5000 too. ilike on title/excerpt/author is fast
    enough on the 29k-row archive that returning everything is fine.

  - New API route /api/search/suggest?q=...&limit=8 returns the top
    matching article titles + category + slug, with a 30-second CDN
    cache + 60-second stale-while-revalidate.

  - The search input in the Browse bar now debounces (150ms) and
    fires that API per keystroke once 2+ chars are typed. Matches
    appear in a styled dropdown below the input — click to navigate
    directly to /news/<slug>, or press Enter to fall through to the
    full /search page. "See all results for …" link in the dropdown
    footer.

  - Keyboard: Escape closes the dropdown; aria-autocomplete + role
    listbox/option for accessibility.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
2026-05-20 06:00:10 +00:00
parent e8552794fe
commit cb00f7f343
5 changed files with 237 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/styles/tailwind.css
View File

@@ -839,6 +839,97 @@ h1, h2, h3 {
height: 48px;
}
/* Search wrapper holds input + autocomplete dropdown */
.bb-browse-search-wrap {
position: relative;
flex: 0 1 360px;
max-width: 400px;
min-width: 200px;
}
/* Autocomplete dropdown */
.bb-browse-search-suggest {
position: absolute;
top: calc(100% - 4px);
left: 0;
right: 0;
z-index: 60;
background: #0d1118;
border: 1px solid #2a3a50;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
padding: 4px 0;
max-height: 70vh;
overflow-y: auto;
list-style: none;
margin: 0;
}
.bb-browse-search-suggest-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
font-family: var(--font-body);
font-size: 13px;
color: #d1d8e4;
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.bb-browse-search-suggest-item:hover,
.bb-browse-search-suggest-item:focus-visible {
background: rgba(59, 130, 246, 0.12);
color: #ffffff;
outline: none;
}
.bb-browse-search-suggest-title {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bb-browse-search-suggest-cat {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
opacity: 0.75;
}
.bb-browse-search-suggest-all {
border-top: 1px solid #1f2937;
margin-top: 2px;
padding-top: 2px;
}
.bb-browse-search-suggest-all button {
display: block;
width: 100%;
text-align: left;
padding: 8px 14px;
background: transparent;
border: 0;
cursor: pointer;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
color: var(--color-accent);
transition: background var(--transition-fast);
}
.bb-browse-search-suggest-all button:hover {
background: rgba(59, 130, 246, 0.14);
color: #ffffff;
}
/* Search input (left side) */
.bb-browse-search {
position: relative;