Search bar doesn't work


#1

i’m trying to use search … but don’t know where the issue
my html

<ion-header no-border>
  <ion-toolbar no-border hideBackButton mode="ios">
    <ion-buttons start>
      <button ion-button navPop>
<ion-icon class="back-icon" *ngIf=" this.Platform.dir() === 'ltr'" start name="md-arrow-round-back"></ion-icon>
<ion-icon class="back-icon" *ngIf=" this.Platform.dir() === 'rtl'" start name="md-arrow-round-forward"></ion-icon>
      </button>
    </ion-buttons>
<ion-title class="page-title">{{'FCLINIC' | translate:param}}</ion-title>

<ion-searchbar *ngIf="isSearchbarOpened" ShowCancelButton="true" (ionInpt)="getClinc($event)" 
(ionCancel)="isSearchbarOpened=false" animated="true"></ion-searchbar>

<ion-buttons end>
    <button ion-button end *ngIf="!isSearchbarOpened" (click)="isSearchbarOpened=true">
    <ion-icon class="search-icon" name="ios-search"></ion-icon>
  </button>
</ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="list-ion-content" no-border>
  <ion-list class="list-view" mode="ios">
<button no-border ion-item *ngFor="let Clinic of CLinics">
      <ion-avatar class="img-view" item-start>
<img [src]="Clinic.image">
      </ion-avatar>
      <h3 class="text-header">{{Clinic.name}}</h3>
<p class="text-info">{{Clinic.address}}</p>
      <ion-icon class="rate-icon" item-end name="md-star-half">
<ion-note class="rate-num">{{Clinic.stars}}</ion-note>
      </ion-icon>
      
    </button>
  </ion-list>
    
</ion-content>

file .ts

import {
  Component
} from '@angular/core';
// import { Http } from '@angular/http';
// import { HttpClient } from '@angular/common/http';
import {
  NavController,
  NavParams,
  Platform
} from 'ionic-angular';



@Component({
  selector: 'page-clinc',
  templateUrl: 'clinc.html',
})
export class ClincPage {
  CLinics: any[];
  ClinicText : string = '';
  items : any;
  public isSearchbarOpened = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, public Platform: Platform) {

    this.CLinics = this.navParams.get('Data');

    this.initializeItems();

  }
  initializeItems() {
    this.items = this.CLinics
  }
  getClinic(ev : any) {
    this.initializeItems();
    var val = ev.target.value;

    if (val && val.trim() != ''){
      this.items = this.items.filter((item => {
        return ( item.tolowerCase().indexof(val.tolowerCase()) > -1);
          }
        )
      )

    }
  }

}

#2

any help … please


#3

You wrote : (ionInpt)=“getClinc($event)”
while it’s (ionInput).


#4

thank you for reply i fix it but now i getting this error

item.tolowerCase is not a function

#5

Dude.
I will be very clear.
Do not develop Ionic App if you can’t write a line of javascript (or typescript) without one error)
https://www.w3schools.com/jsref/jsref_tolowercase.asp


#6

aha i gotta it … but still facing the same error
my code

  import {
    Component
  } from '@angular/core';
  import {
    NavController,
    NavParams,
    Platform
  } from 'ionic-angular';
  import { ClinicProfilePage } from '../clinic-profile/clinic-profile';



  @Component({
    selector: 'page-clinc',
    templateUrl: 'clinc.html',
  })
  export class ClincPage {
    CLinics: string[];
    // ClinicText : string = '';
    items : string[];
    public isSearchbarOpened = false;
    constructor(public navCtrl: NavController, public navParams: NavParams, public Platform: Platform) {

      this.CLinics = this.navParams.get('Data');

      console.log(this.CLinics);
      

      this.initializeItems();

    }
    initializeItems() {
      this.items = this.CLinics
    }
    getClinc(ev : any) {
      this.initializeItems();
      var val = ev.target.value;

      if (val && val.trim() != ''){
        this.items = this.items.filter((item => {
          return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
            }
          )
        )

      }
    }

    pushProfile(id : string){
      this.navCtrl.push(ClinicProfilePage, { id : id })
      
    }

  }

#7

i tried to use also

item.name.toLowerCase()

but getting the same error