Search Bar

The SearchBar module represents a UI component similar to UISearchBar in iOS and SearchView for Android, both of which allow you to to create a simple filter for the the content in the app. This module gives you the simple way to handle a submit event and a clear event.

API Reference for SearchBar Class

Native Component

Android iOS
android.widget.SearchView UISearchBar

Image

HTML

<SearchBar hint="Search hint" [text]="searchPhrase" (textChange)="onTextChanged($event)" (submit)="onSubmit($event)" 
            color="white" textFieldBackgroundColor="red" textFieldHintColor="white"></SearchBar>

Handle SearchBar submit event.

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

@Component({
    moduleId: module.id,
    templateUrl: "./basic-search-bar.component.html"
})
export class BasicSearchBarComponent {
    public searchPhrase: string;

    public onSubmit(args) {
        let searchBar = <SearchBar>args.object;
        alert("You are searching for " + searchBar.text);
    }

    public onTextChanged(args) {
        let searchBar = <SearchBar>args.object;
        console.log("SearchBar text changed! New value: " + searchBar.text);
    }
}

Improve this document

Demo Source


HTML

<SearchBar row="0" hint="Search for a country and press enter" (clear)="onClear($event)" (submit)="onSubmit($event)"></SearchBar>
<ListView row="1" [items]="myItems" class="list-group">
    <ng-template let-item="item">
        <GridLayout class="item list-group-item">
            <Label [text]="item.name" class="list-group-item-heading"></Label>
        </GridLayout>
    </ng-template>
</ListView>

Handle SearchBar submit event.

import { Component, ChangeDetectionStrategy } from "@angular/core";
import { SearchBar } from "ui/search-bar";
class DataItem {
    constructor(public name: string) { }
}

@Component({
    moduleId: module.id,
    templateUrl: "./clear-search-bar.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClearSearchBarComponent {
    private arrayItems: Array<DataItem> = [];
    public myItems: ObservableArray<DataItem> = new ObservableArray<DataItem>();

    constructor() {
        this.arrayItems.push(new DataItem("United States"));
        this.arrayItems.push(new DataItem("Bulgaria"));
        this.arrayItems.push(new DataItem("Germany"));
        this.arrayItems.push(new DataItem("Denmark"));
        this.arrayItems.push(new DataItem("India"));
        this.arrayItems.push(new DataItem("Spain"));
        this.arrayItems.push(new DataItem("Italy"));

        this.myItems = new ObservableArray<DataItem>(this.arrayItems);
    }

    public onSubmit(args) {
        let searchBar = <SearchBar>args.object;
        let searchValue = searchBar.text.toLowerCase();

        this.myItems = new ObservableArray<DataItem>();
        if (searchValue !== "") {
            for (let i = 0; i < this.arrayItems.length; i++) {
                if (this.arrayItems[i].name.toLowerCase().indexOf(searchValue) !== -1) {
                    this.myItems.push(this.arrayItems[i]);
                }
            }
        }
    }

    public onClear(args) {
        let searchBar = <SearchBar>args.object;
        searchBar.text = "";
        searchBar.hint = "Search for a country and press enter";

        this.myItems = new ObservableArray<DataItem>();
        this.arrayItems.forEach(item => {
            this.myItems.push(item);
        });
    }

}

Improve this document

Demo Source


Search Bar Binding

HTML

<GridLayout rows="auto auto" columns="*" sdkExampleTitle sdkToggleNavButton>
    <SearchBar row="0" hint="Search" (textChange)="onTextChange($event)" (loaded)="searchBarLoaded($event)" (submit)="onSubmit($event)"></SearchBar>
    <Label row="1" [text]="searchPhrase" textWrap="true" class="h3 p-15 text-center"></Label>
</GridLayout>

Improve this document

Demo Source


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.