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
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!
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
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
@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 
Hi,
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 
Here’s ready component:
@eakoriakin
I have tried for [isMultiple]=“true”. Gone through demo on 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.
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
