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 the MD mode. The default is set to md-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 Change button to select the uploaded image from Media Manager.Text - set the cancel button text. Only applies to iOS mode. The default is set to Cancel. Show - set the behavior for the cancel button: Never (default), Always, Focus. Cancel Button Text I18n - if set to True then use the Cancel 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 Name | Property Description |
|---|---|
| Searchbar Color | Set 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 Color | Select 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.
Updated 6 months ago