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.
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`);
}
<StackLayout>
<SearchBar hint="Search" color="yellow" backgroundColor="red" textFieldHintColor="whitesmoke" textFieldBackgroundColor="orangered" />
</StackLayout>
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;
}
<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;
}
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.
|
Name |
Description |
clear |
Emitted when the search is cleared (via the clear button).
|
submit |
Emitted when the serach term is submitted. |