Introduction

The Search component is an instant-search autocomplete input that filters and navigates through pre-compiled JSON document indexes completely client-side. Rather than firing expensive database requests on every keystroke, the Search input lazily loads its static JSON document once on initial user interaction and provides debounced, instant matches.

The Search component is fully integrated as a search block in the Page Builder, allowing content authors and developers to configure index source addresses, result label metrics, dropdown constraints, and empty-state placeholders directly within the CMS.

Usage via CMS Page Builder (JSON)

These examples illustrate how content editors bind and structure instant search controls inside the JSON page schemas (content/pages/*.json).

1. Instant Article Search Dropdown

Queries are filtered against a pre-compiled blog post search index, displaying a dropdown with up to 5 matching results.

{
  "type": "search",
  "src": "/api/posts/search.json",
  "placeholder": "Search articles...",
  "itemLabel": "articles",
  "maxSuggestions": 5,
  "debounceMs": 150,
  "interactive": true
}

2. In-Place Element Grid Filtering

Instead of displaying a navigation dropdown, this configuration hides or reveals existing elements on the page (such as card modules or lists) whose unique attributes (like data-post-slug) match the filtered results.

{
  "type": "search",
  "src": "/api/posts/search.json",
  "placeholder": "Filter visual cards...",
  "itemLabel": "modules",
  "filterAttribute": "data-post-slug",
  "emptyStateId": "search-no-results-placeholder",
  "interactive": true
}

3. Standard No-JS Fallback Form

Demonstrates a standard layout configuration wrapping a semantic GET form method that queries a direct URL parameter when Javascript execution is unavailable.

{
  "type": "search",
  "src": "/api/posts/search.json",
  "action": "/blog",
  "placeholder": "Search website...",
  "syncUrl": true,
  "interactive": true
}

CMS Configuration Reference

These fields map directly to Sveltia CMS block properties under public/admin/config.yml or the Page Builder configurations:

Developer Notes & Accessibility

• Standard GET Fallback: When the action parameter is specified, the input wraps inside a semantic HTML <form method="get"> element. If JavaScript fails to hydrate, standard keystroke submission queries are safely posted straight to the fallback action path for robust static compatibility.
• Roving Dropdown Keyboard Controls: Fully supports intuitive accessibility keys:
  • Arrow keys (ArrowUp/ArrowDown) roam active focus sequentially through autocomplete dropdown items.
  • Pressing Enter triggers immediate navigation to the highlighted item's target route (href).
  • Pressing Escape collapses the dropdown or clears the active search string.
• Micro-Payload Client Filtering: Index documents point to pre-compiled static haystacks matching token structures. By separating content compiling to the build step (SSG), search execution is kept extremely lightweight with no live runtime APIs required.