How to dynamically render a searchbar inside a ion-select component

Hi All,

I have develop shopping app, here i use select element with more than 100 items, all item scroll to view take more time. So i need to render dynamic ion-searchbar element inside a ion-select element for easy to find and select the item.

Could you please anyone share your opinion regarding this.

Thanks & Regards,
Pandiyaraj

At that point, an ion-select is not the best component to be used.
Use a modal instead.

I have more than ten select element in my app. Each select element require separate modal and also ten component need to create, it increase my code length.
How to update a selected value in previous page.

Anyone tell your suggestion regarding this query

Does anyone found anything on this??

@Component({
template: <ion-header> <ion-navbar class="searchBar"> <ion-buttons start> <button ion-button (click)="closeModal()"> <span class="icon-back" item-right></span> </button> </ion-buttons> <ion-searchbar class="searchPlatform" #search autocomplete="on" [(ngModel)]="mySearchInput" (ionInput)="getItems($event, mySearchInput)"></ion-searchbar> </ion-navbar> </ion-header> <ion-content > <ion-list radio-group [(ngModel)]="selectedValue"> <ion-item class="border" *ngFor="let val of listValue"> <ion-label>{{val.items}}</ion-label> <ion-radio class="resolvedState" value="{{val.items}}" (ionSelect)="isChanged(val)"></ion-radio> </ion-item> </ion-list> </ion-content>
})

export class SearchControlModal {
public listValue: any;
public selectedValue: any;
public stringInput: any;
public mySearchInput: any;

constructor(
public params: NavParams,
public view: ViewController
){
this.tempStorage= params.data.ModalValue;
this.mySearchInput=’’;
}

closeModal(){
this.view.dismiss();
}

isChanged(data){
this.view.dismiss(data);
}

getItems(ev: any, content){
}

}

Try this solution, it works for me

Hey ! I’m still a beginner in ionic2. I tried implementing your code but I’m not understanding what to write in the getItems(ev:any) function since I’m using a REST API to fetch the data. Do you mind providing me the code for that ?

getItems(ev: any, content){
this.result= ev.target.value;
}

try like this