Ionic search issue

Ionic Framework ionic-v3
1

Hello guys,

I’m making a search bar on my Ionic app.

Here’s an example data list:

homes = [
{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}
];

Here’s my Typescript:

filterItems(searchTerm){

    return this.items.filter((item) => {
        return item.city.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });

}

I want to be able to search not just cities but also price, zip and state. and this search bar should not be case sensitive. It appears to be case sensitive… but I want it to search regardless of capital letters, lowercase letters, numbers.
How should I edit this typescript?

Please help!

Thanks,

2

I found

return this.items.filter((item) => {
        return item.city.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
    });

can return search result from single data entry only… how can I make it search through price, zip, state at a time?

This command is actually not case sensitive. I was wrong…

3

First make your list of homes a property of the class so you can access it in your methods

  private homes: any[] = [{
    "h_id": "3",
    "city": "Dallas",
    "state": "TX",
    "zip": "75201",
    "price": "162500"
  }, {
    "h_id": "4",
    "city": "Bevery Hills",
    "state": "CA",
    "zip": "90210",
    "price": "319250"
  }, {
    "h_id": "5",
    "city": "New York",
    "state": "NY",
    "zip": "00010",
    "price": "962500"
  }];

Here is the method that you would call by passing the search term:

  filterItems(searchTerm): any[] {
    return this.homes.filter((item) => {
      const searchFields:string[] = ['city', 'price', 'zip', 'state'];
      if (searchFields.some((field) => {
        return item[field].toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
      })) {
        return 1;
      }

    });
  }
1 Like
4

Amazing!

Thanks a lot!! it indeed works well now.
Is it possible to insert navigation function to each city from search result?
For instance, I have Ionic pages for each of the cities and need search result to lead to each city when a user tabs on it.

Anyways this is great and I really appreciate your time!

5

For instance, I added navigation function to the data:

{
    "h_id": "3",
    "city": "Dallas",
    "state": "TX",
    "zip": "75201",
    "price": "162500",
   "navigate": "openPage01()"
  }, {
    "h_id": "4",
    "city": "Bevery Hills",
    "state": "CA",
    "zip": "90210",
    "price": "319250",
 "navigate": "openPage02()"
  }

and I’m trying to call this navigate function on Ionic’s html page

 <ion-item style="background: black; color: white;" *ngFor="let item of items">
                                       
<div (click)="{{items.navigate}}">
                           <h4><strong>{{item.city}}</strong></h4>
                          <p>{{item.state}}</p> 
                         <p>{{item.zip}}</p> 
                     </div>
</ion-item>

This example of course will not work… how can I load function from data entry?
Is there any way around this?

Thanks a lot!

6

You should read about navigation : https://ionicframework.com/docs/components/#navigation

The best option would be to create a single page but to pass navParams when you push to that page.

1 Like
7

Yes,
But this isn’t a single page app.
It has all features on a single page but each different city has its own page.

So there are search bars included per each page. This is the only way I could build this app due to some other things going on per each page…

There are 20 different cities and 20 different pages which all have the same search bar. This need 20 different navigate functions as a result.
I want to be able to navigate to different pages through search bar… how can I pass in navigate function to search result item?

Thanks again!

8

this function below should be a part of search result item attribute.

  goToOtherPage() {
    //push another page onto the history stack
    //causing the nav controller to animate the new page in
    this.navCtrl.push(OtherPage);
  }

So users can search city and tab on the result to navigate to that city’s page…
It sounds easy but there’s no way I can pass in a function from data property.
I have no clue on this now.
Need some help… thanks!