Search Bar

The SearchBar module represents a UI component similar to UISearchBar in iOS and android.widget.SearchView for Android, both of which allow you to to create a simple filter for the the content in the app. This component provides hint and text properties and submit and clear events.

Usage

Using SearchBar component with hint and text with Angular binding. The user input can be handled by using the submit, textChange and clear events.

HTML
TypeScript

<SearchBar hint="Enter search term here ..."
            [text]="searchPhrase" (textChange)="onTextChanged($event)" 
            (clear)="onClear($event)" (submit)="onSubmit($event)">
</SearchBar>

import { Component } from "@angular/core";
import { SearchBar } from "tns-core-modules/ui/search-bar";

@Component({
    moduleId: module.id,
    templateUrl: "./usage.component.html"
})
export class UsageComponent {
    searchPhrase: string;

    onSubmit(args) {
        const searchBar = args.object as SearchBar;
        console.log(`Searching for ${searchBar.text}`);
    }

    onTextChanged(args) {
        const searchBar = args.object as SearchBar;
        console.log(`Input changed! New value: ${searchBar.text}`);
    }

    onClear(args) {
        const searchBar = args.object as SearchBar;
        console.log(`Clear event raised`);
    }
}

Improve this document

Demo Source

Styling

<SearchBar hint="Search" 
           color="yellow" backgroundColor="red"
           textFieldHintColor="whitesmoke"
           textFieldBackgroundColor="orangered">
</SearchBar>

Improve this document

Demo Source

Properties

Name	Type	Description
`hint`	`string`	Gets or sets the text of the search bar text field hint/placeholder.
`text`	`string`	Gets or sets a search bar text.
`textFieldBackgroundColor`	`Color`	Gets or sets the TextField background color of the SearchBar component.
`textFieldHintColor`	`Color`	Gets or sets the TextField Hint color of the SearchBar component.

Events

Name	Description
`clear`	Emitted when the search is cleared (via the clear button).
`submit`	Emitted when the serach term is submitted.

API References

Name	Type
tns-core-modules/ui/search-bar	`Module`
SearchBar	`Class`

Native Component

Android	iOS
android.widget.SearchView	UISearchBar

NativeScript Angular