NOTE! You are browsing legacy documentation. For latest visit docs.nativescript.org.

NativeScript Core

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.

<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`);
}

Styling

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

Code Behind

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

<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;
}

Creating SearchBar component via Code-Behind

<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