Have you seen all of the free code samples available on our Marketplace?

NativeScript Angular

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.

Image

The example shows how to create SerachBar component via HTML and how to handle submit and textChange events. The SearchBar's text will be printed in the console for both textChange and submit events.

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


The example shows, how to handle SearchBar's clear event, which will be executed when the SearchBar's text is removed. 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

The example demonstrates, how to setup the available component's events (loaded, textChange, submit), while using DataBinding in NativeScript Angular.

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