ionic2-autocomplete
ionic2-autocomplete copied to clipboard
Problems with mult search bar
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.