如何将输入搜索栏更改为自动完成搜索？

Question

我正在从事 ionic 4 项目。我的项目使用输入搜索和执行按钮从 url 获取数据 json。我的代码工作正常，没有问题，但我想更改输入搜索栏以自动完成搜索，以便更轻松。我尝试了不同的代码，但没有人工作！

我的代码：

export class FlightsearchPage {
      public search = ''
      public flight : any
      constructor(private http: HTTP, public loadingController: LoadingController) {

      }

      async addThemFunction(){
        this.http.get('/search/web/find?query='+this.search+'', {}, {})
        .then(data => {
          const parsed = JSON.parse(data.data);
          this.flight = parsed.results;
        }), err=>{}
      }
}

HTML:

<ion-content padding>
    <ion-input   [(ngModel)]="search"></ion-input>
    <ion-button color="primary" (click)="addThemFunction()">Search</ion-button>
{{flight}}

<ion-item *ngFor="let item of flight" > 
  {{item.id}}
  </ion-item>
</ion-content>

有什么帮助吗？

Answer 1

您可以使用 keyup 这将帮助您监控字段变化。

<ion-content padding>
    <ion-input   [(ngModel)]="search" (keyup)="keyPressed($event)" ></ion-input>
    <ion-button color="primary" (click)="addThemFunction(search)">Search</ion-button>
{{flight}}

<ion-item *ngFor="let item of flight" > 
  {{item.id}}
  </ion-item>
</ion-content>

在 TS 中：

keyPressed(event: any) { // without type info
    console.log(event.target.value); // get you the typed value;
this.addThemFunction(event.target.value);
  }

 async addThemFunction(search){

    this.http.get('/search/web/find?query='+search+'', {}, {})
    .then(data => {

      const parsed = JSON.parse(data.data);
      this.flight = parsed.results;
    }), err=>{
    }
  }

我认为这应该可行。

如何将输入搜索栏更改为自动完成搜索？

How to change input search bar to auto complete search?

search

angular

ionic4