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=>{
    }
  }

我认为这应该可行。

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

1 个答案: