anura-searchbar

<anura-searchbar></anura-searchbar>

Simple search input with optional siggestions (depends on the adapter)

Attributes

adapter

required: yes, live: no, default: -

With which adapter to talk to (for translations and suggestions)

suggest

required: no, live: on-change, default: true

Show suggested search terms (in a datalist) for auto-completion. Quality and availability depends on the adapter.

remember

required: no, live: on-change, default: 0

When suggest is active, remember the last n submitted search terms and suggest those as well.

reset

required: no, live: on-change, default: true

Whether to show a small "x" at the end to clear the input.

state

required: no, live: no, default: true

Whether to update the URL to persist the currently selected node (for sharing the link)

mode-select

required: no, live: on-change, default: false

Whether to show a small dropdown where the user can select if the search terms should be ANDed od ORed

mode

required: no, live: on-change, default: true

Whether the search terms should be ANDed od ORed (support depends on the adapter).

proxy-for

required: no, live: on-change, default: -

Proxy mode for another <anura-searchbar>, executes the search over there (must be querySelectable)

<anura-searchbar adapter="..." proxy-for="#main-search"><!-- lives somewhere in a corner -->
<!-- other stuff -->
<anura-searchbar adapter="..." id="main-search"><!-- thee component actually triggering the search -->

close-modal

required: no, live: on-change, default: -

Only for proxy mode, closes an open model (must be querySelectable), probably the one this component lives in.

value

read-only

The value attribute is set by the component, as if it were a regular input field.

Events

change

standard change event

Fired when the user submits the search either by pressing the search button or by hitting enter.

Note that

Parts

<form part="searchbar-form">
    <input  part="searchbar-child searchbar-input">
    <button part="searchbar-child searchbar-button searchbar-reset"></button>
    <button part="searchbar-child searchbar-button searchbar-submit"></button>
</form>