Searchbar

ion-searchbar

Improve this doc

Manages the display of a Searchbar which can be used to search or filter items.

Usage

<ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

Input Properties

Attr Type Details
cancelButtonText string

Set the the cancel button text. Default: "Cancel".
showCancelButton boolean

Whether to show the cancel button or not. Default: "false".
debounce number

How long, in milliseconds, to wait to trigger the input event after each keystroke. Default 250.
placeholder string

Set the input's placeholder. Default "Search".
autocomplete string

Set the input's autocomplete property. Values: "on", "off". Default "off".
autocorrect string

Set the input's autocorrect property. Values: "on", "off". Default "off".
spellcheck string|boolean

Set the input's spellcheck property. Values: true, false. Default false.
type string

Set the type of the input. Values: "text", "password", "email", "number", "search", "tel", "url". Default "search".
value string

Set the input value.

Output Events

Attr Details
ionInput

When the Searchbar input has changed including cleared.
ionBlur

When the Searchbar input has blurred.
ionFocus

When the Searchbar input has focused.
ionCancel

When the cancel button is clicked.
ionClear

When the clear input button is clicked.

Related

Searchbar Component Docs

API

Native

General