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.

XML
JavaScript
TypeScript

<StackLayout>
        <SearchBar id="searchBar" hint="Enter search term here ..." text="{{sbText}}" clear="onClear" submit="onSubmit" />
</StackLayout>

const observableModule = require("tns-core-modules/data/observable");

function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    vm.set("sbText", "");

    vm.on(observableModule.Observable.propertyChangeEvent, (propertyChangeData) => {
        if (propertyChangeData.propertyName === "sbText") {
            const searchBar = propertyChangeData.object;
            console.log(`Input changed! New value: ${propertyChangeData.value}`);
        }
    });
    page.bindingContext = vm;
}

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

function onClear(args) {
    const searchBar = args.object;
    console.log("Clear event raised");
}

exports.onNavigatingTo = onNavigatingTo;
exports.onSubmit = onSubmit;
exports.onClear = onClear;

import { Observable, PropertyChangeData } from "tns-core-modules/data/observable";
import { SearchBar } from "tns-core-modules/ui/search-bar";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    vm.set("sbText", "");
    vm.on(Observable.propertyChangeEvent, (propertyChangeData: PropertyChangeData) => {
        if (propertyChangeData.propertyName === "sbText") {
            const searchBar = propertyChangeData.object as SearchBar;
            console.log(`Input changed! New value: ${propertyChangeData.value}`);
        }
    });
    page.bindingContext = vm;
}

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

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

Improve this document

Demo Source

Styling

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

Improve this document

Demo Source

Code Behind

In the following example is shown, how to create SearchBar via Code-behind

XML
JavaScript
TypeScript

<StackLayout id="stackLayoutId">
    <Label text="{{ 'Result(text): ' + sbResult}}" textWrap="true" />

</StackLayout>

function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new searchBarModule.SearchBar();
    // set up SearchBar submit event
    searchBar.on(searchBarModule.SearchBar.submitEvent, (args) => {
        console.log("Search for ", args.object.text);
        dialogs.alert(`Search for ${args.object.text}`)
        .then(() => {
            console.log("Dialog closed!");
        });
    });
    // set up SearchBar clear event
    searchBar.on(searchBarModule.SearchBar.clearEvent, (args) => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
        .then(() => {
            console.log("Dialog closed!");
        });
    });

    searchBar.on("textChange", (args) => {
        vm.set("sbResult", args.object.text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;

export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    const stackLayout: StackLayout = <StackLayout>page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new SearchBar();
    // set up SearchBar submit event
    searchBar.on(SearchBar.submitEvent, (sbargs: EventData) => {
        console.log("Search for ", (<SearchBar>sbargs.object).text);
        dialogs.alert(`Search for ${(<SearchBar>sbargs.object).text}`)
            .then(() => {
                console.log("Dialog closed!");
            });
    });
    // set up SearchBar clear event
    searchBar.on(SearchBar.clearEvent, () => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
            .then(() => {
                console.log("Dialog closed!");
            });
    });

    searchBar.on("textChange", (sbargs) => {
        vm.set("sbResult", (<SearchBar>sbargs.object).text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}

Improve this document

Demo Source

Creating SearchBar component via Code-Behind

XML
JavaScript
TypeScript

<StackLayout id="stackLayoutId">
    <Label text="{{ 'Result(text): ' + sbResult}}" textWrap="true" />

</StackLayout>

function onPageLoaded(args) {
    const page = args.object;
    const vm = new observableModule.Observable();
    const stackLayout = page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new searchBarModule.SearchBar();
    // set up SearchBar submit event
    searchBar.on(searchBarModule.SearchBar.submitEvent, (args) => {
        console.log("Search for ", args.object.text);
        dialogs.alert(`Search for ${args.object.text}`)
        .then(() => {
            console.log("Dialog closed!");
        });
    });
    // set up SearchBar clear event
    searchBar.on(searchBarModule.SearchBar.clearEvent, (args) => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
        .then(() => {
            console.log("Dialog closed!");
        });
    });

    searchBar.on("textChange", (args) => {
        vm.set("sbResult", args.object.text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}

exports.onPageLoaded = onPageLoaded;

export function onPageLoaded(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();
    const stackLayout: StackLayout = <StackLayout>page.getViewById("stackLayoutId");

    vm.set("sbResult", "");
    // creating new SearchBar
    const searchBar = new SearchBar();
    // set up SearchBar submit event
    searchBar.on(SearchBar.submitEvent, (sbargs: EventData) => {
        console.log("Search for ", (<SearchBar>sbargs.object).text);
        dialogs.alert(`Search for ${(<SearchBar>sbargs.object).text}`)
            .then(() => {
                console.log("Dialog closed!");
            });
    });
    // set up SearchBar clear event
    searchBar.on(SearchBar.clearEvent, () => {
        console.log("Clear");
        dialogs.alert("Clear SearchBar text")
            .then(() => {
                console.log("Dialog closed!");
            });
    });

    searchBar.on("textChange", (sbargs) => {
        vm.set("sbResult", (<SearchBar>sbargs.object).text);
    });


    stackLayout.addChild(searchBar);

    page.bindingContext = vm;
}

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 Core