Table of Contents
Examples
Basic UsageUpdate searchDataUrl
JavaScript Reference
ConstructorRequirements
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
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"]
}
}