Issue
I’m trying to make a simple search bar in ionic :
and I want to search with (registration number or the name and Lastname)
mean when I write the registration number or the name in the search bar I will get the same result
but I’m not getting this result I’m missing something please help me
here the ts file
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-search',
templateUrl: './search.page.html',
styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {
jsonData: any = [];
constructor() {
this.initislizaJSONData();
}
ngOnInit() {
}
initislizaJSONData(){
this.jsonData= [
{ natricule: "1125", name: "youssef najjar" },
{ natricule: "1126", name: "ala harroum" },
{ natricule: "1127", name: "baha chitoui" },
{ natricule: "1128", name: "chamalou" },
{ natricule: "1129", name: "japa" },
{ natricule: "1130", name: "mohamed ben mohamed" },
{ natricule: "1131", name: "yossra yosor" },
];
}
filterJSONData(ev: any) {
this.initislizaJSONData();
const val = ev.target.value;
if (val && val.trim() != "") {
if (Number(val) === NaN) {
// console.log(Number(val))
this.jsonData = this.jsonData.filter((item) => {
return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
else if (val && val.trim() != "" && Number(val) != NaN) {
// console.log("2 "+Number(val))
this.jsonData = this.jsonData.filter((item) => {
return (item.natricule.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}}
}
selectVal(val) {
alert("you have selectes =" + val);
}
}here the HTML file
<ion-header>
<ion-toolbar color="medium">
<ion-buttons slot="start">
<ion-back-button defaultHref="folder/Inbox"></ion-back-button>
</ion-buttons>
<ion-title>ionic searchbar</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-searchbar (ionInput)="filterJSONData($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding">
<ion-list>
<ion-item
(click)="selectVal(item.natricule)"
*ngFor="let item of jsonData"
>{{item.name}}</ion-item
>
</ion-list>
</div>
</ion-content>Solution
Here you go!
I have created a stackblitz example for you.
Never mess with your input dataset. Keep it away from filter functions.
Instead have a temporary array and update it whenever needed. Also I think there were too many unnecessary checks you placed.
filteredData: any= [];
constructor() {
//move your JSON data here
this.jsonData= [
{ natricule: "1125", name: "youssef najjar" },
{ natricule: "1126", name: "ala harroum" },
{ natricule: "1127", name: "baha chitoui" },
{ natricule: "1128", name: "chamalou" },
{ natricule: "1129", name: "japa" },
{ natricule: "1130", name: "mohamed ben mohamed" },
{ natricule: "1131", name: "yossra yosor" },
];
}
filterJSONData(ev: any) {
const val = ev.target.value;
this.filteredData = (this.jsonData.filter((x) => {
if( x.natricule.includes(val) || x.name.includes(val)) {
return x;
}
}));
}
Bind this.filteredData to your html
<ion-item (click)="selectVal(item.natricule)"
*ngFor="let item of filteredData" >{{item.name}}
</ion-item>
Hope it works for you!