Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content. A searchbar should be used instead of an input to search lists.
A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any Ionicon.
A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in ios mode, and as an icon in md mode. Both the text and icon can be customized using different properties, with the icon accepting any Ionicon.
Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
A debounce can be set on the searchbar in order to delay triggering the ionChange event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input.
Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a higher specificity selector. Targeting the ion-searchbar for customization will not work, therefore we recommend adding a class and customizing it that way.
The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Set the input's placeholder. placeholder can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic>
Sets the behavior for the cancel button. Defaults to "never". Setting to "focus" shows the cancel button on focus. Setting to "never" hides the cancel button. Setting to "always" shows the cancel button regardless of focus state.
Sets the behavior for the clear button. Defaults to "focus". Setting to "focus" shows the clear button on focus if the input is not empty. Setting to "never" hides the clear button. Setting to "always" shows the clear button regardless of focus state, but only if the input is not empty.
The ionChange event is fired for <ion-searchbar> elements when the user modifies the element's value. Unlike the ionInput event, the ionChange event is not necessarily fired for each alteration to an element's value.
The ionChange event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. ionChange can also fire when clicking the clear or cancel buttons.
ionClear
Emitted when the clear input button is clicked.
ionFocus
Emitted when the input has focus.
ionInput
Emitted when the value of the ion-searchbar element has changed.