---
title: anura-searchbar
url: 'https://doc.brix.ch/anura/webcomponents/components/searchbar'
markdown: 'https://doc.brix.ch/anura/webcomponents/components/searchbar.md'
lang: en
date: '2026-10-26'
description: 'Technical documentation for brix:anura webcomponents – Software developed by brix'
taxonomy:
  category:
    - docs
---

[](#) 

  [ Welcome ](https://doc.brix.ch/)     [ brix:anura ](https://doc.brix.ch/anura)     [ Anura Webcomponents ](https://doc.brix.ch/anura/webcomponents)     [ Components ](https://doc.brix.ch/anura/webcomponents/components)      anura-searchbar    

# anura-searchbar

#### Table of Contents

- [Attributes](#attributes)
- [Events](#events)
- [Parts](#parts)

```html
<anura-searchbar></anura-searchbar>
```

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

![Screenshot of <anura-searchbar>](https://doc.brix.ch/user/pages/03.anura/01.webcomponents/02.components/searchbar/anura-searchbar.png)

## 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 `querySelect`able)

```html
<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 `querySelect`able), 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>`

#### placeholder

> required: no, live: no, default: "Search term" (or a translation thereof)

Override the "Search term" placeholder text with your own.

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

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

 [ ](https://doc.brix.ch/anura/webcomponents/components/paginator) [](https://doc.brix.ch/anura/webcomponents/components/select)

---

## Navigation

- Parent: [Components](https://doc.brix.ch/anura/webcomponents/components.md)
- Previous: [anura-paginator](https://doc.brix.ch/anura/webcomponents/components/paginator.md)
- Next: [anura-select](https://doc.brix.ch/anura/webcomponents/components/select.md)