ionic2-autocomplete icon indicating copy to clipboard operation
ionic2-autocomplete copied to clipboard

Ionic 3 - Multiple AutoComplete controls on same page

Open hernancantori opened this issue 6 years ago • 1 comments

I'd like to know if its possible to access multiple AutoComplete controls on the same page. I have no problem retrieving values from backend for all of them, but I can't get the values selected.,

the searchbar variable actually points to the second autocomplete control, while searchbar2 is undefined.

image

In my HTML: <ion-auto-complete [dataProvider]="provider" #searchbar> <ion-auto-complete [dataProvider]="provider2" #searchbar2>

In my .ts: @ViewChild('searchbar') @ViewChild('searchbar2') searchbar: AutoCompleteComponent; searchbar2: AutoCompleteComponent;

I dont know if im doing something wrong, please advice!!!

hernancantori avatar Jan 31 '19 12:01 hernancantori

@DrowningLessons I am able to achieve multiple like this:

<ion-row>
  <ion-col class="textarea-label">
    Inclusive Tags
  </ion-col>
  <ion-col [size]="12">
    <ion-auto-complete [(model)]="inclusiveTags"
                       [dataProvider]="provider"
                       (itemSelected)="includeTag($event)"
                       [multi]="true"
                       [options]="inclusiveOptions"
                       [removeButtonColor]="'dark'"></ion-auto-complete>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col class="textarea-label">
    Exclusive Tags
  </ion-col>
  <ion-col [size]="12">
    <ion-auto-complete [(model)]="exclusiveTags"
                       [dataProvider]="provider"
                       (itemSelected)="excludeTag($event)"
                       [multi]="true"
                       [options]="exclusiveOptions"
                       [removeButtonColor]="'dark'"></ion-auto-complete>
  </ion-col>
</ion-row>

jrquick17 avatar Mar 01 '19 14:03 jrquick17