@panoramax/web-viewer/docs/reference/components/ui/SearchBar.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.ui.SearchBar"></a>

## Panoramax.components.ui.SearchBar ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.ui</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Emits**: [<code>result</code>](#Panoramax.components.ui.SearchBar+event_result)  
**Element**: pnx-search-bar  

* [.SearchBar](#Panoramax.components.ui.SearchBar) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
    * [new SearchBar()](#new_Panoramax.components.ui.SearchBar_new)
    * [.properties](#Panoramax.components.ui.SearchBar+properties) : <code>Object</code>
    * ["result"](#Panoramax.components.ui.SearchBar+event_result)

<a name="new_Panoramax.components.ui.SearchBar_new"></a>

### new SearchBar()
Search Bar Element displays an interactive search widget.

**Example**  
```html
<pnx-search-bar
  id="my-search-bar"
  placeholder="Search something..."
  .searcher=${mysearchfct}
  ._parent=${viewer}
  reduceable="false"
  reduced="false"
  size="xxl" @result=${e => console.log(e.detail)}
>
  <!-- Optional icon for display on left-side of search bar -->
</pnx-search-bar>
```
<a name="Panoramax.components.ui.SearchBar+properties"></a>

### searchBar.properties : <code>Object</code>
Component properties.

**Kind**: instance property of [<code>SearchBar</code>](#Panoramax.components.ui.SearchBar)  
**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| [id] | <code>string</code> |  | The ID attribute set on component and prefix for input as well |
| [placeholder] | <code>string</code> |  | Default text to display on empty field |
| [reduceable] | <code>boolean</code> | <code>false</code> | Can the search bar be collapsed (for mobile view) |
| [reduced] | <code>boolean</code> | <code>false</code> | Is the search bar currently collapsed ? |
| [value] | <code>string</code> |  | The default input value |
| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The component sizing (md, xxl) |
| [searcher] | <code>function</code> |  | 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] | <code>boolean</code> | <code>false</code> | Set to true to ignore menu closure events |

<a name="Panoramax.components.ui.SearchBar+event_result"></a>

### "result"
Event for search result clicked

**Kind**: event emitted by [<code>SearchBar</code>](#Panoramax.components.ui.SearchBar)  
**Properties**

| Name | Type | Description |
| --- | --- | --- |
| detail | <code>object</code> \| <code>null</code> | The data associated to clicked item (format based on searcher function results), or null on reset |