Ionic2 ion-select with search bar

Question

I need to create an ionic select that has a search bar within it, is that possible and how can I do it? I also tried to create an alert that contains a search input and a radio options inside it and i couldn't do so, may because i can't mix different input types inside the same alert.

Thanks in advance

Solution

I found another workaround to do this, i used the PopoverController instead of the alert and it allows me to add a component inside (in my case its name AutoCompleteSearchPage) it which contains the search bar and the list and what ever i need to use there

import {
  PopoverController
}
  
from 'ionic-angular';
constructor(public navCtrl: NavController, public navParams: NavParams,
    public popoverCtrl: PopoverController) {



    let popover = this.popoverCtrl.create(AutoCompleteSearchPage, {
      
      dataContext: this.DataContext,
      autocomplete: this,
      ispopover: true,
    });
    popover.present({
      ev: myEvent
    });

the html template for the search page:

<ion-header>

  <ion-navbar>
      <ion-title>
          {{LookUpTableName}}
      </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <ion-searchbar (ionInput)="runSearch($event,viewmodel)" style="padding:5px"></ion-searchbar>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content pullingIcon="arrow-dropdown"
                               pullingText="Pull to refresh"
                               refreshingSpinner="circles"
                               refreshingText="Refreshing...">
        </ion-refresher-content>
    </ion-refresher>
    <ion-list>
        <button ion-item *ngFor="let item of dataList" (click)="selectItem(item)">
            {{item?.Name}}
        </button>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles"
                                     loadingText="Loading more data...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>