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)

<anura-searchbar adapter="#my-adapter"></anura-searchbar>

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.

<anura-searchbar suggest="false"></anura-searchbar>

remember

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

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

<anura-searchbar remember="10"></anura-searchbar>

reset

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

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

<anura-searchbar reset="false"></anura-searchbar>

state

required: no, live: no, default: true

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

<anura-searchbar state="false"></anura-searchbar>

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 or ORed.

<anura-searchbar mode-select></anura-searchbar>

mode

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

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

<anura-searchbar mode="or"></anura-searchbar>

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 anura-modal (must be querySelectable), probably the one this component lives in.

<anura-searchbar close-modal="#my-modal"></anura-searchbar>

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.

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>