kadoshms / ionic2-autocomplete

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

Problems with mult search bar #155

Open renanmoraes opened 6 years ago

renanmoraes commented 6 years ago

I need to use 3 search bar but each one pointing to a specific search link.

I'm doing it this way:

HTML


 <ion-auto-complete [dataProvider]="searchTypeImmobileProvider"
                       [hideListOnSelection]="true"
                       (itemSelected)="getSearchResultImmobile($event)"
                       [options]="{ placeholder : 'placeholder.seachTypeImmobile' | translate, noItems: 'placeholder.noItemsTypeImmobile' | translate }"
                       #searchTypeImmobile></ion-auto-complete>

  <ion-auto-complete [dataProvider]="searchCitiesProvider"
                     [hideListOnSelection]="true"
                     (itemSelected)="getSearchCities($event)"
                     [options]="{ placeholder : 'placeholder.seachCities' | translate, noItems: 'placeholder.noItemsCities' | translate }"
                     #searchCities></ion-auto-complete>

  <ion-auto-complete [dataProvider]="searchCepsProvider"
                     [hideListOnSelection]="true"
                     (itemSelected)="getSearchCeps($event)"
                     [options]="{ placeholder : 'placeholder.seachDistrict' | translate, noItems: 'placeholder.noItemsDistrict' | translate }"
                     #searchDistrict></ion-auto-complete>

app.module

providers: [
    SearchCitiesProvider,
    SearchTypeImmobileProvider,
    SearchCepsProvider,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: Interceptors,
      multi: true
    },
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Toast
  ]

PROVIDER CEP

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";

/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCepsProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/ceps/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

PROVIDER CITIES


import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";

/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCitiesProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/cities/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

PROVIDER TYPEIMMOBILE

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {AutoCompleteService} from 'ionic2-auto-complete';
import 'rxjs/add/operator/map'
import {environment} from "../environments/env";

/*
  Generated class for the SearchCitiesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class SearchCitiesProvider implements AutoCompleteService {
  labelAttribute = "name";
  formValueAttribute = "";
  host = environment.api.url;

  constructor(private http: HttpClient) {
  }

  getResults(keyword: string) {
    return this.http.get(this.host + '/cities/search/' + keyword)
      .map(
        (result: any) => {
          console.log(result)
          return result.data.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
        });
  }
}

This error is appearing, I tried to execute several ways of correction but I could not, and I'm not really sure what the error is.

Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.