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


#1

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
#2

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

countries.html

<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

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!


#3

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.


#4

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

Abc.html

<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

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


#5

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


#6

Hi,
Anybody able to implement this ?


#7

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


#8

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:


#9

Here’s ready component: