Search and results

Preview Available in release assets

Progressively enhance a named site-search landmark around a canonical server-submitted GET form while keeping results and counts server-owned.

Server contract

GET /api/advanced/marketing-search?view=search renders the complete native response; a Datastar request to the same action receives the stable server-authored fragment. Keep search results outside the search landmark.

The browser performs the ordinary request and renders a complete server response without enhancement.

Search and results primary example

<section aria-labelledby="search-title">
  <h1 id="search-title">Search</h1>
  <search aria-label="Site search">
    <form action="/search" method="get">
      <label for="query">Search stories</label>
      <input class="thin-input" id="query" name="q" type="search" value="field notes" required />
      <button class="thin-button" type="submit">Search</button>
    </form>
  </search>
  <p class="thin-status" aria-live="polite">12 server-matched results</p>
  <ol class="thin-search-results">
    <li>
      <article>
        <h2><a href="/stories/field-notes/">Field notes with a deliberately long title</a></h2>
        <p>Server-authored excerpt.</p>
      </article>
    </li>
  </ol>
</section>

Show code

<section aria-labelledby="search-title">
  <h1 id="search-title">Search</h1>
  <search aria-label="Site search">
    <form action="/search" method="get">
      <label for="query">Search stories</label>
      <input class="thin-input" id="query" name="q" type="search" value="field notes" required />
      <button class="thin-button" type="submit">Search</button>
    </form>
  </search>
  <p class="thin-status" aria-live="polite">12 server-matched results</p>
  <ol class="thin-search-results">
    <li>
      <article>
        <h2><a href="/stories/field-notes/">Field notes with a deliberately long title</a></h2>
        <p>Server-authored excerpt.</p>
      </article>
    </li>
  </ol>
</section>

Anatomy

Named search landmark
Native GET form
Server response status
Durable result or recovery content

Variants and sizes

Default
Long content
No JavaScript

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Pending
Results
Empty
Validation error
Server error
Reconnect
Long localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The ordinary form submits normally. Datastar may morph returned HTML and announce only server-confirmed state; it must not calculate result truth, vote totals, or validation.

Accessibility

Use one named native search landmark for the site-search controls, keep result status and the result list outside it, retain the visible label, and use restrained live announcements.

Contract

LIVE

Basis

Native search/poll forms, labelled results, links, radio controls, and status

Evidence

tests/unit/site/marketing-search.test.ts

API

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The browser performs the ordinary request and renders a complete server response without enhancement.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/behaviors.js

Dependencies: datastar@1.0.2

Source: packages/ui/src/items/marketing-search/style.ts

Composition

Derived from the examples and style specs, not authored.