How to: Autocomplete search bar


#1

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.


#2

No one has implemented the autocomplete search?


#3

Do you mean something like this? Sorry if I misunderstood your question.
https://www.npmjs.com/package/ng2-completer

its simple as this…
this.dataService = completerService.local(this.searchData, 'name', 'name').imageField("image").descriptionField("description");


#4

Seems good! I take a look now, thx you!


#5

Hi!! Did you know how can i get the id from the selected item?

My directive:

<ion-auto-complete class="ion-autocomplete" name="id" max-selected-items="1" [(ngModel)]="reserva.id" [dataProvider]="hotelservice" autocomplete="off" ng-model="model" item-value-key="id" items-clicked-method="clickedMethod(callback)" >
      
   </ion-auto-complete>

items-clicked-method doesnt work, can you help me please


#6

I know this is too late but it may help some one…

I have created a repository take a look on it…