NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
SearchBar

This is an overview of the most common usage of SearchBar. For more information about the available properties, methods, or events, head over to the complete API documentation for SearchBar.

<SearchBar> is a UI component that provides a user interface for entering search queries and submitting requests to the search provider.


<SearchBar hint="Search hint" :text="searchPhrase" @textChange="onTextChanged" @submit="onSubmit" />

<SearchBar> provides two-way data binding using v-model.

<SearchBar v-model="searchQuery" />

Props

NameTypeDescription
hintStringGets or sets placeholder text for the input area.
textStringGets or sets the value of the search query.
textFieldBackgroundColorColorGets or sets the background color of the input area.
textFieldHintColorColorGets or sets the color of the placeholder text.

Events

namedescription
textChangeEmitted when the text is changed.
submitEmitted when the search input is submitted.
clearEmitted when the current search input is cleared through the X button in the input area.

Native Component

AndroidiOS
android.widget.SearchViewUISearchBar
Contributors