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.
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.
Hi@mesk80
You can use navcontroller for this
import {NavController} from 'ionic-angular';
constructor(public navCtrl: NavController,
) {
}
navigatetoDetailpage(){
this.navCtrl.push('detailspage');
}
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.
Hi @vibinflogesoft,
This is what exactly I need. Please refer this
I followed this but its not working :
@mesk80
Hope the search is working fine.
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…
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?
Did you check the click function is working or not?
I got your error your misplaced the classname 
you added detailspage as your classname in the push instead of DetailspagePage
So do as follows
navigateToDetails(){
this.navCtrl.push('DetailspagePage');
}
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.
@mesk80
Your details page is blank ?
add some dummy content 
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);
}
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.
@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})
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.
cosole the value of this.item
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.item=navParams.data.item;
console.log(this.item);
}
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.
how to show an message if value is not found
any help would be highly appreciated
Hi@flycoders_sourav,
Usually we are searching on an array in case of search.So you can show and hide meassage based on the length of array:smiley:
<div *ngIf="!searchresult?.length > 0">Not Found!</div>
Thanks for your valuable response but i want to print toast message