Search

Overview of the Search Component

Searchbars represent text fields that can be used to search through a collection. They can be displayed inside a toolbar or the main content.

Search should be used instead of an Input to search lists. A clear button is displayed 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. A cancel button can be enabled which will clear the input and lose the focus upon clicking.

Properties

🚧

Important Note!

This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.

The Search component has the following properties:

Common Properties

Property Name

Property Description

Value

The searchbar value.

Placeholder

Instructional text that shows before the input has a value. The default is set to Search.

Placeholder I18n

If set to True then use the Placeholder property for internationalization.

Search Icon

The icon to be used as the search icon. The default is to search.
Click the Default icon button to select the icon.

Custom Search Icon

Select an .svg file. This path will be added as the 'src' attribute. Click the Change button to select the uploaded image from Media Manager.

Animated

If set to true, enables the search bar animation. The default is set to false.

Autocomplete

Indicates whether the value of the control can be automatically completed by the browser. The values are On and Off (default).

Autocorrect

Indicate whether auto correction should be enabled when the text value is being entered/edited. The values are On and Off (default).

Enter Key Hint

An input attribute that specifies what action label or icon to present for the enter key on virtual keyboards: Enter, Done, Go, Next, Previous, Search, Send.

Input Mode

An input attribute indicating which type of keyboard to display: None, Decimal, Email, Numeric, Search, Tel, Text, Url.

Spellcheck

If set to true, enables spellcheck on the input. The default is set to false.

Debounce

Indicate for how long, in milliseconds, to wait to trigger the ionInput event after each keystroke. The default is set to 250.

Clear Icon

Set the clear icon. The default is to close-circle for iOS and close for MD.
Click the Default icon button to select the icon.

Custom Clear Icon

Select an .svg file. This path will be added as the 'src' attribute. Click the Change button to select the uploaded image from Media Manager.

Type

Set the input type of control to display. The values are Text, Password, Email, Number, Search (default), Tel, Url.

Is Focus

If set to True, shows the searchbar when it has focus. Works in the visual editor only.

Cancel Button

Set the behavior for the cancel button. Can be boolean (true or false) or string.

  • *Icon- sets the cancel button icon. Only applies to theMDmode. The default is set tomd-arrow-back**. Click the**Default icon** button to select the icon.
  • *Custom Icon- select an.svg file. This path will be added as the 'src' attribute. Click the Changebutton to select the uploaded image fromMedia Manager**.
  • *Text- set the cancel button text. Only applies toiOSmode. The default is set toCancel**.
  • *Show**- set the behavior for the cancel button:Never(default),Always,**Focus**.
  • *Cancel Button Text I18n- if set toTruethen use theCancel Button Text** property for internationalization.

(ionBlur)

Emitted when the search is blurred.

(ionChange)

Emitted when the value has changed.

(ionClear)

Emitted when the clear button is clicked.

(ionFocus)

Emitted when the search has focus.

(ionInput)

Emitted when the keyboard input ocurrs.

Styles Properties

Under the Styles tab, searchbars can be styled with several attributes to look like in a specific way:

Property NameProperty Description
Searchbar ColorSet the color of searchbar by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about searchbars.