How to use autocomplete on search bar on Ionic 4?

问题

I'm looking for some example but cannot see anyone googling it, just what i want is to hardcode 2 or 3 words, thank you so much. Do i have to look for on ionic 3? or in angular2 better?

回答1:

In you html

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

in you ts file

 this.isItemAvailable = false; // Declare the variable (in this case isItemAvailable) 
                                  and initialize the items with false

 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);
 })
 }
 }

回答2:

Mohan Gopi's answer is complete, but in order to make use of the debounce attribute, you have to use the ionChange event instead of the ionInput event.

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

That way the event will trigger after the user stops typing (after 500 milliseconds have passed since his last key press), instead of whenever a key is pressed.

回答3:

Just wanted to share something I tried myself. I have implemented the autocomplete from Angulars material design (https://material.angular.io/components/autocomplete/overview) But it did not look exactly as the rest of the ionic input components. I also tried the ion-searchbar but I did not like the search input, I wanted a normal ion-input So I did this:

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>

in 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;
}

Granted the question was about ion-searchbar but maybe somebody out there also wants to use a normal ion-input like me. There is no clear icon but I can live with that, or just add one next to the ion-input. Could be that there is a way to turn the ion-searchbar into a normal ion-input style? Can't find it though in the docs.

来源：https://stackoverflow.com/questions/54998476/how-to-use-autocomplete-on-search-bar-on-ionic-4

标签

autocomplete

ionic4

searchbar