# Search

Table of Contents

###### Examples

Basic Usage
Update searchDataUrl

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods
Static Members

### Description

The `Search` component provides a search input field with debounced input handling and search result display.

### Basic Usage

    <k-search></k-search>

### Update searchDataUrl

You can update the URL from which the search data is fetched by setting the `searchDataUrl` static member. This should be done in the head of your document before any search components are instatiated.

    import Search from '../kempo/components/Search.js';
    Search.searchDataUrl = '/custom-search.json';

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Search()`

### Requirements

- debounce

### Attributes

##### `opened: boolean`

Indicates whether the search results are visible.

### Properties

##### `pages: object`

Contains the search data loaded from `/search.json`.

### Methods

##### `render(force: boolean): Promise<boolean>`

Renders the component and attaches event listeners to the input field.

##### `search(term: string): void`

Performs the search operation and updates the search results.

### Static Members

##### `Search.searchDataUrl: string`

The URL from which the search data is fetched. Default is `/search.json`.

### Search Data Format

The search data file should be a JSON object where each key is a URL path and the value is an object with the following properties:

- `name`: The name of the page.
- `terms`: An array of terms associated with the page.

    {
      "/components/accordion.html": {
        "name": "Components > Accordion",
        "terms": ["accordion", "collapsible", "toggle", "content", "panel", "header"]
      },
      "/components/component.html": {
        "name": "Components > Component",
        "terms": ["component", "base", "root", "framework", "parent"]
      }
    }