Ionic: ion-select & ion-options with search bar


Hi all

I want to create a component that will take the current ion-select and will to it a search bar.
Since i have an ion-select with 100+ items a search bar for it is a must… Any ideas where to start?

common use case… select country for a list of country…

Thanks ahead

Search on the Ionic 2 ion-select element

You want to filter your list from the search bar? Is that correct?
If so, you can achieve this like that:


    <ion-searchbar [(ngModel)]="searchCountryString" (input)="searchCountry($event)" placeholder="Search"></ion-searchbar>
        <button ion-item *ngFor="let country of countries">


countriesInitial = []; //initialize your countriesInitial array empty
countries = []; //initialize your countries array empty
searchCountryString = ''; // initialize your searchCountryString string empty
constructor(http: Http) {
    .subscribe(data => {
       this.countriesInitial = data;
       this.countries = data;
searchCountry(searchbar) {
        // reset countries list with initial call
        this.countries = this.countriesInitial;

        // set q to the value of the searchbar
        var q = searchbar.value;

        // if the value is an empty string don't filter the items
        if (q.trim() == '') {

        this.countries = this.countries.filter((v) => {
            if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
                return true;
            return false;

with that example you should be good to go!


Thanks @skoff that’s a nice workaround. Hopefully the ionic team would eventually create a component for this one with a backdrop / show - hide when the searchbar is focused etc.

Here’s a plunker for the temp workaround. I modified yours a tiny bit to fit in the plunker.


Thank you @skoff for your response. Can you please extend this example little further and explain how


<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
	<ion-item *ngFor="let item of items" (click)="medClicked($event, item)">
	  {{ item }}


medClicked(event, item) {
    What to do here?

Now I want to take the value from html page which I clicked , process it and send to same page. Finally place it in search box or input text.
I know how to do it in JS. I’m unable to find how to do it here. Please help me out
Thanks in Advance


@kiran_nallam Hello, Did you find a solution? I am trying to achieve same. Please please share the solution if you have. I am stuck with this only :frowning:


Anybody able to implement this ?


Hello, can we have a different images for different items???


Hello, for anyone yet in search for a solution. Extending @skoff answer with a hope to be helpful to

someone in search of answer…

Inside Html - add ngModel as below

<ion-searchbar (ionInput)=“getItems($event)” [(ngModel)]=“searchBoxValue” >

<ion-item *ngFor=“let item of items” (click)=“medClicked($event, item)”>
{{ item }}

Inside ts file -

initialize the parameter in ngModel -

searchBoxValue = ‘’;

Now setting the value in searchbox and also clearing the filters beneath the searchbox -

medClicked(event, item) {
this.searchBoxValue = item;
this.items = this.items.filter((item) => {
return ‘’;

That’s it you are done :slight_smile:


Here’s ready component: