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.

<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

Events

API References

Native Component