search filter and listview in nativescript with angular - nativescript-angular

Question

I am new to nativescript!
I am trying to implement a search filter with listview in nativescript-angular, but I am not getting result filter from listview. My HTML component files' code follows.
Here I take searchbar component and listview for showing on screen (home.html):
<ActionBar title="Search" class="action-bar">
<SearchBar hint="Enter search term here"
[text]="searchTerm" (textChange)="onTextChanged($event)"
(clear)="onClear($event)" (submit)="onSubmit($event)" >
</SearchBar>
</ActionBar>
<StackLayout backgroundColor="#66cdaa" padding="5">
<!-- <Label text="Select country"></Label> -->
<listView [items]="dataItems"
suggestMode="Suggest" displayMode="Tokens" backgroundColor="yellow" hint="serch suggestion">
<SuggestionView tkAutoCompleteSuggestionView>
<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</listView>
</StackLayout>
My home.component.ts file code:
import { Component, ViewChild,OnInit } from "#angular/core";
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TokenModel, AutoCompleteCompletionMode, AutoCompleteDisplayMode, AutoCompleteSuggestMode } from "nativescript-ui-autocomplete";
import { SearchBar } from "tns-core-modules/ui/search-bar";
export class BrowseComponent {
data = [];
name="countries"
searchPhrase: string;
private _items: ObservableArray<TokenModel>;
private countries = ["Australia", "Albania", "Austria", "Argentina", Maldives",
"Bulgaria", "Belgium", "Cyprus", "Italy", "Japan", "Denmark", "Finland",
"France", "Germany", "Greece", "Hungary", "Ireland", "Saudi Arabia",
"Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia",
"Slovenia","South Africa","South Korea","Spain","Sri Lanka",
"St Kitts & Nevis","St Lucia","St Vincent","St Lucia","Sudan",
"Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan",
"Tajikistan","Tanzania","Thailand","Timor","Togo","Tonga",
"Trinidad & Tobago","Tunisia","Turkey","Turkmenistan",
"Turks & Caicos","Uganda","Ukraine","United Arab Emirates",
"United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam",
"Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
Here, I take country array and I am trying to filter this country list from html but I am not getting how to implement:
constructor() {
this.initDataItems();
// Use the component constructor to inject providers.
}
These are the functions from searchbar:
onSumit(args) {
const searchBar = args.object as SearchBar;
console.log(`Searching for ${searchBar.text}`);
}
onTextChanged(dataItem) {
const searchBar = dataItem as SearchBar;
console.log(`Input changed! New value: ${dataItem}`);
}
onClear(args) {
const searchBar = args.object as SearchBar;
console.log(`Clear event raised`);
}
get dataItems(): ObservableArray<TokenModel> {
return this._items;
}
Here this is observable Array I take:
private initDataItems() {
this._items = new ObservableArray<TokenModel>();
for (let i = 0; i < this.countries.length; i++) {
this._items.push(new TokenModel(this.countries[i], undefined));
}
ngOnInit(): void {
// Init your component properties here.
}
}

Answer 1

GlobalCompanyArrList: Array<Company>;
onTextChanged(dataItem) {
const searchBar = dataItem as SearchBar;
const searchValue = searchBar.text.toLowerCase();
let arrayItems=this.GlobalCompanyArrList; //Set Main countries Arraylist data to Local Arraylist for Searching
this.companylist_arr=new Array();
if (searchValue !== "") {
for (let i = 0; i < arrayItems.length; i++) {
if (arrayItems[i].NAME.toLowerCase().indexOf(searchValue) !== -1) {
this.companylist_arr.push(arrayItems[i]);
}
}
}
console.log("SearchBar text changed! New value: " + searchBar.text);
}