Search

Table of Contents

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

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:

{
  "/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"]
  }
}