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). This will use the components id to differentiate itself from other components. If you don't provide an ID, a hash of the component will be used. Set it to false to not keep any state at all.

<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>

reset-before-search

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

When using it as a global search input, you may want to reset other search controls before searching.

<anura-searchbar reset-before-search="#my-tree"></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>

© brix Solutions AG