如何在搜索栏 Ionic 4 上设置值？

Question

我正在尝试在搜索栏上设置值，但看不到任何示例，我想要的只是将列表的值放入搜索栏（以执行自动完成搜索栏），我已经完成了这段代码：

HTML

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

TS

    search(event) {
    console.log(event)
    this.initializeListCountries();
    console.log(this.countries)
    const val = event.target.value;
    if (val && val.trim() != '') {
        this.countries = this.countries.filter((country) => {
            return (country.toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
}

selectCountry(country) {
    let val = country.target.value;

}

谢谢

Answer 1

这里你需要在 class 中声明 selectedCountry 变量并将所选国家分配给该变量然后你需要像这样在模板中绑定该变量[value]="selectedCountry"

Solution

HTML

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

TS

selectedCountry: string;//declare global variable

selectCountry(country) {
    this.selectedCountry = country; //assign value

}

如何在搜索栏 Ionic 4 上设置值？

How to set value on searchbar Ionic 4?

searchbar

ionic4