Partial Component

Search

The Search partial provides an interactive search interface that can work with different data sources. It includes live search results, accessibility features, and customizable configuration options.

Manifest

{
  "name": "search",
  "type": "partial",
  "styles": ["search.css"],
  "scripts": ["search.js"],
  "validation": {
    "properties": {
      "placeholder": {
        "type": "string",
        "default": "Search..."
      },
      "settings.maxResults": {
        "type": "number",
        "default": 20
      },
      "settings.minCharacters": {
        "type": "number",
        "default": 2
      }
    }
  }
}

Configuration

searchIndex: '/library-search-index.json'
placeholder: 'Search components...'
title: 'Search Components'
subtitle: 'Find the component you need'
settings:
  maxResults: 20
  minCharacters: 2
  enableHighlighting: true

Configuration Options

Property	Type	Required	Default	Description
`title`	string	No	-	Search section title
`subtitle`	string	No	-	Search section subtitle
`searchIndex`	string	No	'/search-index.json'	JSON data source URL
`placeholder`	string	No	'Search...'	Input placeholder text
`settings.maxResults`	number	No	20	Maximum search results
`settings.minCharacters`	number	No	2	Minimum characters to trigger search

Example

Component Search Demo

Search through the component library

Usage in Templates

{% from "components/_partials/search/search.njk" import search %}

{{ search({
  title: 'Search Components',
  subtitle: 'Find the component you need',
  searchIndex: '/library-search-index.json',
  placeholder: 'Search components...'
}) }}

Features

Live Search: Real-time results with fuzzy matching (Fuse.js)
Accessibility: ARIA labels, live regions, and keyboard navigation
Multiple Sources: Different JSON data sources supported
Clear Function: Built-in clear button for search input
Status Updates: Search status announcements for screen readers
Configurable Results: Limit results and minimum character thresholds
Search Highlighting: Optional highlighting of matching terms