How to use searchbar with autocomplete for an array of key-values?

Hi everybody,

My problem i dont know what i’m doing wrong because cannot use a searchbar with autocomplete, the list is key-value and cannot filter it, what is the best solution? Then i have to click on some item of the list and set it on searchbar value…

Here is my code:


    search(event) {
        const val =;
        if (val && val.trim() != '') {
            this.countries = this.countries.keys.filter((country) => {
                return (country.key.toLowerCase().indexOf(val.toLowerCase()) > -1);

    selectCountry(country) {
        let val =;
<ion-content padding>
    <ion-searchbar type="text" debounce="500" animated 
        placeholder="Filtrar por país" color="dark"
        (ionChange)="search($event)" clearInput></ion-searchbar>
        <ion-item *ngFor="let country of countries" (click)="selectCountry($country)">
            {{ country.value }}

Thank you so much,