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…
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;
})
}
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.
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