Searchbar

Searchbars represent a text field that can be used to search through a collection.

Examples

Basic Usage

<Mdx-searchbar />
<Mdx-searchbar placeholder="Custom Placeholder" />
<Mdx-searchbar disabled="true" placeholder="Disabled" />

Search Icon

A search icon is displayed to the left of the input field in a searchbar.

<Mdx-searchbar />
<Mdx-searchbar searchIcon="customSearchIcon" placeholder="Custom Search Icon" />

Clear Icon

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.

<Mdx-searchbar showClearButton="focus" value="Show on Focus" />
<Mdx-searchbar showClearButton="always" value="Always Show" />
<Mdx-searchbar showClearButton="never" value="Never Show" />
<Mdx-searchbar showClearButton="always" clearIcon="customClearIcon" value="Custom Clear Icon" />

Cancel button

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.

<Mdx-searchbar showCancelButton="focus" placeholder="Show on Focus" />
<Mdx-searchbar showCancelButton="always" placeholder="Always Show" />
<Mdx-searchbar showCancelButton="never" placeholder="Never Show" />

Debounce

A debounce can be set on the searchbar in order to delay triggering the @ion-input 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.

<Mdx-searchbar v-model="search" debounce="300" @ion-input="onSearch" />

Properties

v-model

Description	You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations
Type	"String" | "null"
Required	true

placeholder

Description	The placeholder value of the search input.
Type	String
Default	Search

debounce

Description	Set the amount of time, in milliseconds, to wait to trigger the ionInput event after each keystroke.
Type	"Number" | "undefined"
Default	undefined

clearIcon

Description	Set the clear icon.
Type	"String" | "undefined"
Default	undefined

searchIcon

Description	Set the search icon.
Type	"String" | "undefined"
Default	undefined

showCancelButton

Description	Sets the behavior for the cancel button..
Type	"always" | "focus" | "never"
Default	never

showClearButton

Description	Sets the behavior for the clear button.
Type	"always" | "focus" | "never"
Default	always

disabled

Description	If true, the user cannot interact with the input.
Type	Boolean
Default	false

size

Description	The height of the searchbar.
Type	"small" | "default"
Default	default