I’m looking for a combobox component in Ionic. It’s essentially a form element that combines ion-input and ionic-searchbar. I’ve implemented it to a certain extent using ionic-searchbar, but I’m having difficulty making it look like ionic-input and making it a formControl.
Here’s the HTML:
<ion-searchbar (ionInput)="search($event)" [(ngModel)]="searchString" debounce=1000></ion-searchbar>
<ion-list class="results" *ngIf="showResults">
<ion-item *ngFor="let item of items" (click)="set(item)">
<ion-thumbnail item-left>
<img src="assets/logos/{{item.key.toLowerCase()}}.svg">
</ion-thumbnail>
{{item.key}} - {{item.value}}
</ion-item>
</ion-list>
Here’s the TypeScript:
export class AirlineSearch implements OnInit {
data: any;
promise:any;
public items: any;
public searchString: string;
public showResults: boolean;
constructor(private nav: NavController, navParams: NavParams, private airlineCodes: AirlineCodes) {
this.showResults = false;
}
ngOnInit(): void {
this.airlineCodes.load().then(res => this.data = res);
}
set(item) {
this.searchString = item.key + ' - ' + item.value;
this.showResults = false;
}
search(ev: any) {
// set val to the value of the searchbar
let val = this.searchString;
if (val && val.trim() == '') {
this.showResults = false;
}
let input: string = val.trim();
this.items = this.data.filter(function (row) {
if (input.length < 2) {
return;
}
input = input.toLowerCase();
let str: string = null;
if (input.length == 2) {
str = row.key.toLowerCase();
}
if (input.length > 2) {
str = row.value.toLowerCase();
}
return str.includes(input);
});
if (this.items.length == 1) {
this.set(this.items[0]);
}
if (this.items.length > 1) {
this.showResults = true;
}
}
}
I think it would be useful to have a component where one can just write:
<ion-combobox (ionInput)="search($event)" [(ngModel)]="searchString" debounce=1000 formControlName="combobox"></ion-combobox>
Any thoughts?