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

json

{
  "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

yaml

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

Configuration Options

Property	Type	Required	Default	Description
`title`	string	No	-	Search section title
`subtitle`	string	No	-	Search section subtitle
`source`	string	No	'/search-index.json'	JSON search index URL (also accepts`settings.source`)
`searchType`	string	No	'default'	Search type key — selects Fuse.js weights (`site`,`library`,`default`)
`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

html

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

{{ search({
  title: 'Search Components',
  subtitle: 'Find the component you need',
  source: '/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