Search

Live Demo

Search Input

Search with Suggestions

Search Results Page

No Results State

States

Follows the Interaction States matrix. The input implements default and focus; suggestions and result filters implement default, hover, focus, and selected. The static is-* classes mirror the live pseudo-class states.

Code sample

<!-- Search input -->
<form class="caat-search" role="search" aria-label="Site search">
  <i class="bi bi-search caat-search__icon" aria-hidden="true"></i>
  <input type="search" class="form-control caat-search__input"
         placeholder="Search CAAT resources..."
         aria-label="Search CAAT resources">
  <button type="button" class="caat-search__clear"
          aria-label="Clear search">
    <i class="bi bi-x-lg" aria-hidden="true"></i>
  </button>
</form>

<!-- Results -->
<div class="caat-search-results">
  <p class="caat-search-results__count">12 results for "pension benefits"</p>
  <div class="caat-search-results__item">
    <h4 class="caat-search-results__title"><a href="#">Result Title</a></h4>
    <p class="caat-search-results__url">caat.ca &rsaquo; section</p>
    <p class="caat-search-results__excerpt">Excerpt with <mark>highlighted term</mark>.</p>
    <div class="caat-search-results__meta">
      <span class="badge bg-light text-dark">Category</span>
    </div>
  </div>
</div>

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation

5. Content Guidance

• Placeholder text should guide users: "Search CAAT resources…" or "Search for pension information…".
• Keep suggestion terms concise — ideally 2 – 4 words matching common member queries.
• Result excerpts should be 1 – 2 sentences long, with the search term highlighted using <mark>.
• URL breadcrumbs should reflect the page hierarchy, not the full URL.
• No-results state should always include helpful links to guide users to relevant content.
• Category tags on results help members identify content type at a glance.

6. Semantic HTML

Search input

<form class="caat-search" role="search" aria-label="Site search">
  <i class="bi bi-search caat-search__icon" aria-hidden="true"></i>
  <input type="search"
         class="form-control caat-search__input"
         placeholder="Search CAAT resources..."
         aria-label="Search CAAT resources">
  <button type="button" class="caat-search__clear"
          aria-label="Clear search">
    <i class="bi bi-x-lg" aria-hidden="true"></i>
  </button>
</form>

Search results

<div class="caat-search-results">
  <p class="caat-search-results__count">
    12 results for &ldquo;pension benefits&rdquo;
  </p>
  <div class="caat-search-results__item">
    <h4 class="caat-search-results__title">
      <a href="/page-url">Page Title</a>
    </h4>
    <p class="caat-search-results__url">
      caat.ca &rsaquo; section &rsaquo; page
    </p>
    <p class="caat-search-results__excerpt">
      Excerpt with <mark>highlighted term</mark>.
    </p>
    <div class="caat-search-results__meta">
      <span class="badge bg-light text-dark">Category</span>
    </div>
  </div>
</div>

Suggestions dropdown

<ul class="caat-search__suggestions" id="search-suggestions"
    role="listbox">
  <li class="caat-search__suggestion" role="option">
    <i class="bi bi-search" aria-hidden="true"></i>
    pension calculator
  </li>
</ul>

7. CSS Contract

8. Accessibility

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Notes

• Resource type: caat/components/search
• Sling Model: SearchModel — exposes query, results[], totalResults, suggestions[], helpfulLinks[].
• HTL template: search.html — uses data-sly-test to switch between results, no-results, and initial states.
• Client library: caat.components.search — CSS + JS. JS handles typeahead debounce, keyboard navigation, and analytics events.
• Policy: Authors can configure search endpoint, enable/disable suggestions, and set results-per-page via template policy.
• Allowed parents: Layout Container, Header, Experience Fragment.
• Search service: Integrates with AEM QueryBuilder or external search API (e.g. Azure Cognitive Search). Endpoint configured in OSGi.

12. Dialog Model

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "jcr:primaryType": "nt:unstructured",
  "sling:resourceType": "cq/gui/components/authoring/dialog",
  "tabs": {
    "properties": {
      "placeholderText": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Placeholder text",
        "name": "./placeholderText"
      },
      "accessibleLabel": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Accessible label",
        "name": "./accessibleLabel",
        "required": true
      },
      "searchEndpoint": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Search endpoint",
        "name": "./searchEndpoint",
        "required": true
      },
      "enableSuggestions": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox",
        "label": "Enable suggestions",
        "name": "./enableSuggestions"
      },
      "suggestionEndpoint": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "Suggestion endpoint",
        "name": "./suggestionEndpoint"
      },
      "resultsPerPage": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/numberfield",
        "label": "Results per page",
        "name": "./resultsPerPage",
        "min": 1,
        "max": 50,
        "value": 10
      },
      "noResultsMessage": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield",
        "label": "No-results message",
        "name": "./noResultsMessage"
      },
      "helpfulLinks": {
        "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
        "label": "Helpful links",
        "name": "./helpfulLinks",
        "fields": {
          "linkLabel": { "type": "textfield", "label": "Link label" },
          "linkUrl": { "type": "textfield", "label": "URL" }
        }
      }
    }
  }
}

13. QA Acceptance Checklist

• Search input renders at 3.5rem height with magnifying glass icon and clear button.
• Placeholder text displays correctly and is customisable via dialog.
• Focus ring appears on input using --caat-focus token colour.
• Clear button resets the input and is keyboard accessible.
• Suggestion dropdown appears on typing with correct hover/focus states.
• Arrow keys, Enter, and Escape work correctly with suggestions.
• Search results display title (linked), URL breadcrumb, excerpt, and category tag.
• Search term is highlighted with <mark> in result excerpts.
• Results count displays correctly (e.g. "12 results for 'pension benefits'").
• No-results state shows message, suggestions, and helpful links.
• role="search" is present on the form element.
• Screen readers announce result count via aria-live region.
• Analytics events (search-submitted, search-result-click, search-no-results) fire correctly.
• Cross-browser tested: Chrome, Firefox, Safari, Edge.

14. Definition of Done