kadoshms / ionic2-autocomplete

Ionic 2 autocomplete component
MIT License
149 stars 108 forks source link

Ionic 3 - Multiple AutoComplete controls on same page #171

Open hernancantori opened 5 years ago

hernancantori commented 5 years ago

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!!!

jrquick17 commented 5 years ago

@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>