I’m trying to obtain something like this:
I’m trying this plugin.
It works, but i need to receive more than only one field back (like description and image).
PROVIDER.
import {AutoCompleteService} from 'ionic2-auto-complete';
import { Http } from '@angular/http';
import {Injectable} from "@angular/core";
import 'rxjs/add/operator/map';
@Injectable()
export class AutocompleteProvider implements AutoCompleteService {
labelAttribute = "name";
constructor(private http:Http) {}
getResults(keyword:string) {
return this.http.get("https://restcountries.eu/rest/v1/name/"+keyword)
.map(
result => {
return result.json()
.filter(item => item.name.toLowerCase().startsWith(keyword.toLowerCase()))
});
}
}
.HTML:
<ion-auto-complete [dataProvider]="autocompleteProvider"></ion-auto-complete>
.TS
import { AutocompleteProvider } from '../../providers/autocomplete-provider';
@Component({
selector: 'page-root-spesa',
templateUrl: 'root-spesa.html',
})
export class RootSpesa {
constructor(public autocompleteProvider: AutocompleteProvider) {}
}
Is possible to retrive other field than the standard labelAttribute (according to the manual) in the html?
According to the manual of this plugin, it’s supports custom templates for the list items, but i got this error following the tutorial:
More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: AutoCompleteItemComponent,CompTestIte
Here the plugin: https://github.com/kadoshms/ionic2-autocomplete
How to select only one component at a time?
The component in html must use the extended class, but currently uses both original and extended.
Thx.