Declare SearchBar via XML

<Page xmlns="" navigatingTo="navigatingTo" class="page">
    <StackLayout class="p-20">
       <SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />

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");


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

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


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) {
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

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