Ionic 3 Search item with item detailed page


#1

Hi,

I need to search the item. After searching the item, it will navigates to the item detailed page when we click on the searched item(item title).

How can we achieve this?

Any help much appreciated.


#2

Hi@mesk80
Can you share some code here?
or please refer the official docs
ionic search


#3

Hi @vibinflogesoft,

Thanks for your reply. I have achieved search functionality and its searching the results well. But additionally I need to add searched item detailed page. When we click on searched result item then it should go to its detailed page.

So let me know how to achieve this. Thanks.


#4

Hi@mesk80
You can use navcontroller for this

import {NavController} from 'ionic-angular';
 constructor(public navCtrl: NavController,
  		) {
  }
navigatetoDetailpage(){
    this.navCtrl.push('detailspage');
}

ionic navigation


#5

Hi,

I have tried but not working. This is my fresh code without using Nav controller and its working normal search :

home.html

<ion-header>

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
<div text-center>
<h1 text-center>Searching?</h1>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</div>
</ion-content>

home.ts


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

items;

  constructor(public navCtrl: NavController) {

this.initializeItems();

  }

 initializeItems() {
    this.items = [
      'Islamabad',
      'Istanbul',
      'Jakarta',
      'Kiel',
      'Kyoto',
      'Le Havre',
      'Lebanon',
      'Lhasa',
    ];
  }

 getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }


}

Let me know how to add item detail page for every item. So that when we click on item it should go its detailed page after searching the item.


#6

Hi @vibinflogesoft,

This is what exactly I need. Please refer this

I followed this but its not working :


#7

@mesk80
Hope the search is working fine.:smiley:
For navigating to details page

HTML

 <ion-list>
    <ion-item *ngFor="let item of items" (click)="navigateToDetails(item)">
      {{ item }}
    </ion-item>
  </ion-list>
TS
navigateToDetails(){
   this.navCtrl.push('detailspage');
}

No need to add seperate details page for each item.only one detailspage is required.
Add a click function and pass parameter as the unique item.
Please let me know if you have any doubts…


#8

Hi @vibinflogesoft,

Thanks for your reply. I have tried this but its not working and shows invalid link message when select searched item. Here is my complete code :

home.html

<ion-header>

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
<div text-center>
<h1 text-center>Searching for a Product?</h1>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="navigateToDetails(item)">
      {{ item }}
    </ion-item>
  </ion-list>
</div>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

items;

  constructor(public navCtrl: NavController) {

this.initializeItems();

  }

 initializeItems() {
    this.items = [
      'Islamabad',
      'Istanbul',
      'Jakarta',
      'Kiel',
      'Kyoto',
      'Le Havre',
      'Lebanon',
      'Lhasa',
    ];
  }

 getItems(ev) {
    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the ev target
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

navigateToDetails(){
   this.navCtrl.push('detailspage');
}


}

detailspage.html

<ion-header>

  <ion-navbar>
    <ion-title>detailspage</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
{{ item }}
</ion-content>

detailspage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-detailspage',
  templateUrl: 'detailspage.html',
})
export class DetailspagePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailspagePage');
  }

}

Why its not working?


#9

Did you check the click function is working or not?
I got your error your misplaced the classname :joy:
you added detailspage as your classname in the push instead of DetailspagePage
So do as follows

navigateToDetails(){
   this.navCtrl.push('DetailspagePage');
}

#10

Hi,

Thanks a lot. Now the click function is working but its not showing the content in item page. Why?

Its only showing the blank page.


#11

@mesk80
Your details page is blank ?
add some dummy content :stuck_out_tongue:
If you want to print the unique items pass the parameter in to detailspage
like

Home.TS
navigateToDetails(item){
   this.navCtrl.push('DetailspagePage',{data:item});
}
details.ts

import {NavParams} from 'ionic-angular';
public data;
constructor(public navParams: NavParams){
this.data=this.navParams.get('data');
console.log(this.data);
}

#12

Hi,

Thanks but I need to added dynamic title and description of every item like this :

  items;

  constructor(public nav: NavController) {
    this.items = [
      {
        'title': 'Angular',
        'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.'
      },
      {
        'title': 'CSS3',
        'description': 'The latest version of cascading stylesheets - the styling language of the web!'
      }
    ]
  }

For eg, When I click on Angular the it should goes to Angular item detail page. In that it will display the related content. How can we achieve this. Please let me know.


#13

@mesk80
Where theis api is calling you?
Inside home.ts or details.ts
if you need unique title u had better pass the title as parameter from home.ts to details.ts
like

this.navCtrl.push('DetailspagePage',{data:item,title:title})

#14

Hi @vibinflogesoft,

I really thank a lot for your effort. Here is my detailed code. But its not working. Why?

home.html

<ion-header>

  <ion-navbar>
    <ion-title>Search</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
<div text-center>
<h1 text-center>Searching for a Item?</h1>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items" (click)="navigateToDetails(item)">
      {{ item }}
    </ion-item>
  </ion-list>
</div>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

 items;

constructor(public nav: NavController) {
    this.items = [
      {
        'title': 'Angular',
        'description': 'A powerful Javascript framework for apps.'
      },
      {
        'title': 'CSS3',
        'description': 'The latest version of cascading stylesheets'
      }
    ]
  }

navigateToDetails(item){
   this.nav.push('DetailspagePage',item);
}


}

detailspage.html

<ion-header>

  <ion-navbar>
    <ion-title>{{ item.title }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
{{ item.title }}
{{ item.description }}

</ion-content>

detailspage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

public data;

@IonicPage()
@Component({
  selector: 'page-detailspage',
  templateUrl: 'detailspage.html',
})
export class DetailspagePage {
item;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
	this.item=navParams.data.item;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailspagePage');
  }

}

Please let me know if I did any mistake here.


#15

cosole the value of this.item

constructor(public navCtrl: NavController, public navParams: NavParams) {
	this.item=navParams.data.item;
console.log(this.item);

  }

#16

Hi @vibinflogesoft

Showing many errors. Any idea to fix?

Please refer this. Same concept :


#17

Hi @vibinflogesoft,

Finally I have fixed it by making some changes. Thank you so much for your help.

Do you have any idea to search JSON data which is in PouchDB?

Thanks.