## Panoramax.components.ui.SearchBar ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Kind**: static class of Panoramax.components.ui **Extends**: [lit.LitElement](https://lit.dev/docs/api/LitElement/) **Emits**: [result](#Panoramax.components.ui.SearchBar+event_result) **Element**: pnx-search-bar * [.SearchBar](#Panoramax.components.ui.SearchBar) ⇐ [lit.LitElement](https://lit.dev/docs/api/LitElement/) * [new SearchBar()](#new_Panoramax.components.ui.SearchBar_new) * [.properties](#Panoramax.components.ui.SearchBar+properties) : Object * ["result"](#Panoramax.components.ui.SearchBar+event_result) ### new SearchBar() Search Bar Element displays an interactive search widget. **Example** ```html console.log(e.detail)} > ``` ### searchBar.properties : Object Component properties. **Kind**: instance property of [SearchBar](#Panoramax.components.ui.SearchBar) **Properties** | Name | Type | Default | Description | | --- | --- | --- | --- | | [id] | string | | The ID attribute set on component and prefix for input as well | | [placeholder] | string | | Default text to display on empty field | | [reduceable] | boolean | false | Can the search bar be collapsed (for mobile view) | | [reduced] | boolean | false | Is the search bar currently collapsed ? | | [value] | string | | The default input value | | [size] | string | "md" | The component sizing (md, xxl) | | [searcher] | function | | Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation) | | [no-menu-closure] | boolean | false | Set to true to ignore menu closure events | ### "result" Event for search result clicked **Kind**: event emitted by [SearchBar](#Panoramax.components.ui.SearchBar) **Properties** | Name | Type | Description | | --- | --- | --- | | detail | object \| null | The data associated to clicked item (format based on searcher function results), or null on reset |