Search bar suggestion drop down in ionic 3

@rajbasilio wrote:

In my ionic app, I want a drop-down list like shown in below image

This is my code. I want drop-down to be in the same page can anyone help me?

<ion-header>
  <ion-navbar>
    <ion-title>Ionic Demo</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <p>Type something to see the results.</p>
  
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list *ngIf="showList">
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

This is ts file

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

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

  showList: boolean = false;
  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Berlin',
      'Bueno Aires',
      'Madrid',
      'Paris'
    ];
  }

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

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

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      
      // Filter the items
      this.items = this.items.filter((item) => {
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
      });
      
      // Show the results
      this.showList = true;
    } else {
      
      // hide the results when the query is empty
      this.showList = false;
    }
  }
}

Posts: 1

Participants: 1

Read full topic