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

**URL:** <https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947>\
**Category:** ionic-v3\
**Created:** [June 15, 2016, 7:19pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947 "2016-06-15T19:19:56Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![royip](https://avatars.discourse-cdn.com/v4/letter/r/54ee81/32.png) [@royip](https://forum.ionicframework.com/u/royip)\
**Post date:** [June 15, 2016, 7:19pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/1 "2016-06-15T19:19:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![skoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/skoff/32/100985_2.png) [@skoff](https://forum.ionicframework.com/u/skoff)\
**Post date:** [June 16, 2016, 1:32am UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/2 "2016-06-16T01:32:52Z")

</div>

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

countries.html

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

countries.ts

```auto
countriesInitial = []; //initialize your countriesInitial array empty
countries = []; //initialize your countries array empty
searchCountryString = ''; // initialize your searchCountryString string empty
................
constructor(http: Http) {
    http.get('url_to_fetch_countries')
    .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() == '') {
            return;
        }

        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!

---

<div class="post-metadata">

**Author:** ![tonyawad88](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tonyawad88/32/110226_2.png) [@tonyawad88](https://forum.ionicframework.com/u/tonyawad88)\
**Post date:** [June 16, 2016, 2:24pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/3 "2016-06-16T14:24:20Z")

</div>

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.

> **[Plunker](http://plnkr.co/edit/BX323jPnqfgGTZCU1Ta3?p=preview)**
>
> Created on Plnkr: Helping developers build the web.

---

<div class="post-metadata">

**Author:** ![kiran\_nallam](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kiran\_nallam](https://forum.ionicframework.com/u/kiran_nallam)\
**Post date:** [February 17, 2017, 8:20pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/4 "2017-02-17T20:20:55Z")

</div>

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

Abc.html

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

Abc.ts

```auto
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

---

<div class="post-metadata">

**Author:** ![jbhatt091](https://avatars.discourse-cdn.com/v4/letter/j/4bbf92/32.png) [@jbhatt091](https://forum.ionicframework.com/u/jbhatt091)\
**Post date:** [August 2, 2017, 5:30pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/5 "2017-08-02T17:30:22Z")

</div>

@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 ☹

---

<div class="post-metadata">

**Author:** ![ras1kamal](https://avatars.discourse-cdn.com/v4/letter/r/c37758/32.png) [@ras1kamal](https://forum.ionicframework.com/u/ras1kamal)\
**Post date:** [August 21, 2017, 5:26pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/6 "2017-08-21T17:26:10Z")

</div>

Hi,  
Anybody able to implement this ?

---

<div class="post-metadata">

**Author:** ![Khanum123](https://avatars.discourse-cdn.com/v4/letter/k/7cd45c/32.png) [@Khanum123](https://forum.ionicframework.com/u/Khanum123)\
**Post date:** [September 18, 2017, 9:21am UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/7 "2017-09-18T09:21:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RizwanMalvat](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RizwanMalvat](https://forum.ionicframework.com/u/RizwanMalvat)\
**Post date:** [December 19, 2017, 11:36pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/8 "2017-12-19T23:36:00Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![eakoriakin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/eakoriakin/32/109057_2.png) [@eakoriakin](https://forum.ionicframework.com/u/eakoriakin)\
**Post date:** [May 17, 2018, 4:03am UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/9 "2018-05-17T04:03:21Z")

</div>

Here’s ready component:

> **[eakoriakin/ionic-select-searchable](https://github.com/eakoriakin/ionic-select-searchable)**
>
> ionic-select-searchable - An Ionic component similar to ion-select, that allows to search items, including async search and infinite scrolling.

---

<div class="post-metadata">

**Author:** ![ishankarshinde](https://avatars.discourse-cdn.com/v4/letter/i/34f0e0/32.png) [@ishankarshinde](https://forum.ionicframework.com/u/ishankarshinde)\
**Post date:** [June 17, 2019, 11:10am UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/10 "2019-06-17T11:10:04Z")

</div>

@eakoriakin  
I have tried for **[isMultiple]=“true”**. Gone through demo on [https://stackblitz.com](https://stackblitz.com/)  
My code is simple as provided in the demo likes

> 

```
    <ion-label>Port</ion-label>
    <ionic-selectable
      item-content
      [(ngModel)]="selectedPort"
      itemValueField="ProductId"
      itemTextField="ProductId"
      [items]="portList"
      [canSearch]="true"
      [isMultiple]="true"
      [canClear]="true"
    >
    </ionic-selectable>
  </ion-item>

```

\*\* **Issue is bottom toolbar(Clear and OK) button slide up**. How to its position fixed to bottom. Attaching screen shot.

 ![localhost_8100_(Galaxy%20S5)%20(14)](https://global.discourse-cdn.com/ionicframework/original/3X/2/f/2fba35a0496e17a4df3a740c9c44485f283fc188.png)

---

<div class="post-metadata">

**Author:** ![Hammad6264](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hammad6264/32/128169_2.png) [@Hammad6264](https://forum.ionicframework.com/u/Hammad6264)\
**Post date:** [October 16, 2020, 4:11pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/11 "2020-10-16T16:11:39Z")

</div>

I found an very easy solution to implement search functionality in Ionic and Angular, checkout this: [https://ionictemplates.blogspot.com/2020/10/ionic-45-high-performance-list.html](https://ionictemplates.blogspot.com/2020/10/ionic-45-high-performance-list.html)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:53pm UTC](https://forum.ionicframework.com/t/ionic-ion-select-ion-options-with-search-bar/54947/12 "2021-07-19T20:53:54Z")

</div>