Declare SearchBar via XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <StackLayout class="p-20">
       <SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
    </StackLayout>
</Page>

SearchBar submit event

export function onSubmit(args){
    var searchbar:SearchBar = <SearchBar>args.object;
    console.log("Search submit result: "+searchbar.text);
}

SearchBar clear event

export function onClear(args){
    console.log("clear search-bar text");
}

SearchBar

Using the SearchBar requires the "ui/search-bar" module.

import * as searchBarModule from "tns-core-modules/ui/search-bar";
var searchBar = new searchBarModule.SearchBar();

Searching

var searchBar = new searchBarModule.SearchBar();
searchBar.on(searchBarModule.SearchBar.submitEvent, function (args: observable.EventData) { 
    console.log("Search for " + (<searchBarModule.SearchBar>args.object).text);
});
searchBar.on(searchBarModule.SearchBar.clearEvent, function (args: observable.EventData) {
    console.log("Clear");
});

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.