如何在离子4上的搜索栏上使用自动完成

Question

我正在寻找一些示例，但看不到有人在谷歌搜索，我想要的就是对2或3个单词，非常感谢。我必须在离子3上寻找吗？或在Angular2中更好？

Answer 1

在您的html文件中：

     <ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
     <ion-list *ngIf="isItemAvailable">
         <ion-item *ngFor="let item of items">{{ item }}</ion-item>
     </ion-list>

在您的TS文件中：

     // Declare the variable (in this case and initialize it with false)
     isItemAvailable = false;
     items = [];
     initializeItems(){
         this.items = ["Ram","gopi", "dravid"];
     }
     getItems(ev: any) {
         // Reset items back to all of the items
         this.initializeItems();
         // set val to the value of the searchbar
         const val = ev.target.value;
         // if the value is an empty string don't filter the items
         if (val && val.trim() !== '') {
             this.isItemAvailable = true;
             this.items = this.items.filter((item) => {
                 return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
             })
         } else {
             this.isItemAvailable = false;
         }
     }

Answer 2

Mohan Gopi的答案已经完成，但是要使用debounce属性，您必须使用ionChange事件而不是ionInput事件。

<ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
...
...

这样，事件将在用户停止键入后触发（自上次按键以来已经通过了500毫秒之后），而不是按键按键。

Answer 3

只是想分享我自己尝试的东西。我已经从Angulars材料设计（https://material.angular.io/components/autocomplete/autocomplete/overview）实现了自动完整但是它看起来并不像其他离子输入组件一样。我还尝试了离子搜索键，但我不喜欢搜索输入，我想要一个普通的离子输入，所以我这样做了：

html：

<ion-list>
 <ion-item>
  <ion-label position="floating">Supplier*</ion-label>
  <ion-input (ionChange)="onSearchChange($event)" [(ngModel)]="supplier"></ion-input>                        
 </ion-item>
 <ion-item *ngIf="resultsAvailable">
   <ion-list style="width: 100%; max-height: 200px; overflow-y: scroll;">
    <ion-item *ngFor="let result of results" (click)="supplierSelected(result)" button>
     <ion-label>{{result}}</ion-label>
    </ion-item>
   </ion-list>
  </ion-item>
 </ion-list>

component.ts：

resultsAvailable: boolean = false;
results: string[] = [];
ignoreNextChange: boolean = false;
onSearchChange(event: any) {
    const substring = event.target.value;
    if (this.ignoreNextChange) {
        this.ignoreNextChange = false;
        return;
    }
    this.dataService.getStrings(substring).subscribe((result) => {
        this.results = result;
        if (this.results.length > 0) {
            this.resultsAvailable = true;               
        } else {
            this.resultsAvailable = false;
        }
    });
}
supplierSelected(selected: string) :void {
    this.supplier = selected;
    this.results = [];
    this.resultsAvailable = false;
    this.ignoreNextChange = true;
}

提出的问题是关于离子搜索键的，但也许有人也想使用像我这样的普通离子输入。没有明确的图标，但是我可以忍受，或者只需在离子输入旁边添加一个即可。可能是有一种方法可以将离子搜索键变成普通的离子输入样式吗？尽管在文档中找不到它。