Searchable dropdown

[hirenkorat3]

let me help you to save your time because i already did it.

Step 1: create page

ionic g page selectsearchsingle

Step 2: Copy following code

in selectsearchsingle.html

<ion-header no-border>
  <ion-toolbar>
    <ion-title>
      {{titleText}}
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="CloseModel()">
        Cancel
      </button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar color="light">
    <ion-row>
      <ion-col col-12 no-padding>
        <ion-searchbar mode="ios" [(ngModel)]="searchText" (ionInput)="FilterItems()"></ion-searchbar>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-fab right bottom (click)="CloseModel()">
    <button ion-fab>
      <ion-icon name="checkmark"></ion-icon>
    </button>
  </ion-fab>
  <ion-row *ngFor="let item of filterItems;" (click)="CheckChange(item)" style="border-bottom:1px solid #eee  "
    align-items-center>
    <ion-col col-2 text-center style="padding:5px;">
      <ion-icon *ngIf="item.selected" name="ios-checkmark-circle" color="primary" style="font-size: 26px;"></ion-icon>
      <ion-icon *ngIf="!item.selected" name="ios-radio-button-off" color="primary" style="font-size: 26px;color: rgb(199, 199, 199);"></ion-icon>
    </ion-col>
    <ion-col col-10>
      {{ item.name}}
    </ion-col>
  </ion-row>
</ion-content>

in selectsearchsingle.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Constants } from '../../providers/constants';

@IonicPage()
@Component({
  selector: 'page-selectsearchsingle',
  templateUrl: 'selectsearchsingle.html',
})

export class SelectsearchsinglePage {

  titleText: string = "";
  searchText: string = "";
  items: any[];
  filterItems: any[];
  selectedItems: any[] = [];
  displayOk: any = false;

  constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController,
    public constant: Constants) {
    this.items = this.navParams.get("data");
    this.titleText = this.navParams.get("titleText");
    this.FilterItems();
  }

  FilterItems() {
    this.filterItems = this.items;
    if (this.searchText.trim() !== '') {
      this.filterItems = this.filterItems.filter((item) => {
        return (item.name.toLowerCase().indexOf(this.searchText.toLowerCase()) > -1);
      });
    }
  }

  CheckChange(item: any) {
    for (let index = 0; index < this.filterItems.length; index++) {
      const element = this.filterItems[index];
      if (element.key == item.key) {
        this.filterItems[index].selected = true;
        this.selectedItems = element;
      }
      else {
        this.filterItems[index].selected = false;
      }
    }
  }

  CloseModel() {
    this.viewCtrl.dismiss(this.selectedItems);
  }
}

Step 3 : use it anywhere

in your .html file

<ion-item (click)="OpenSelect()">
      <ion-label fixed>
        <ion-icon item-start ios="ios-map" md="md-map" class="ionicon"></ion-icon>Your Label
      </ion-label>
      <ion-label text-right>{{YourValue}}</ion-label>
</ion-item>

in your .ts file

OpenSelect() {
let data = [];
for (let index = 0; index < this.YourDataArray.length; index++) {
        const element = this.YourDataArray[index];
        data.push({ name: element.Name, key: element.ID });
}
let modal = this.modalCtrl.create('SelectsearchsinglePage', { data: data, titleText: "Please Select" });
modal.onDidDismiss((data) => {
        this.YourValue = data.name;
        this.YourKey = data.key;
});
modal.present();
}