getItemLabel is not working

[fernandopena]

I've removed the labelAttribute field and added the function getItemLabel but it never gets called and the autocomplete fails with the error:

Runtime Error value.replace is not a function

Stack TypeError: value.replace is not a function at BoldPrefix.transform (http://localhost:8100/build/vendor.js:171315:22) at checkAndUpdatePureExpressionInline (http://localhost:8100/build/vendor.js:11857:38) at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:12751:17) at checkAndUpdateNode (http://localhost:8100/build/vendor.js:12684:16) at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:13387:59) at debugCheckRenderNodeFn (http://localhost:8100/build/vendor.js:13366:13) at Object.eval [as updateRenderer] (ng:///AutoCompleteModule/AutoCompleteComponent.ngfactory.js:23:44) at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:13351:21) at checkAndUpdateView (http://localhost:8100/build/vendor.js:12656:14) at callViewAction (http://localhost:8100/build/vendor.js:13014:21) Ionic Framework: 3.6.1 Ionic Native: ^2.9.0 Ionic App Scripts: 2.1.4 Angular Core: 4.1.3 Angular Compiler CLI: 4.1.3 Node: 6.11.1 OS Platform: macOS High Sierra Navigator Platform: MacIntel User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

[kadoshms]

Why did you remove the labelAttirubte?

[fernandopena]

Because in the example is removed and I thought it shouldn't be there:

_import {AutoCompleteService} from 'ionic2-auto-complete'; import { Http } from '@angular/http'; import {Injectable} from "@angular/core"; import 'rxjs/add/operator/map'

@Injectable() export class CompleteTestService implements AutoCompleteService { formValueAttribute = ""

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()) ) }); }

getItemLabel(country: any) { return country.name + ' (' + country.population + ')' } }_

Anyway I'd tried adding it and leaving it empty (labelAttribute = "") and I get the same error.

[kadoshms]

labelAttribute is used for accessing the displayed fields. The only scenario when you don't need it is when your data is represented as a plain string array, which is clearly not the case with the countries example...

[fernandopena]

Thanks for the answer @kadoshms. I need to customize the suggestion display by concatenating several fields. Is it possible? The documentation says:

How to concatenate several fields as label ?

The auto-complete component allows you to use templates for customize the display of each suggestion. But in many cases, the default template is good. However, you need to concatenate several fields (like firstname and lastname) to produce a full label. In that case, you can declare a method named getItemLabel instead of using labelAttribute.

[kadoshms]

After investigating this issue a bit, I found out that there's indeeded a problem with it, hopefully I'll have enough time to fix it soon :) As a workaround, you can use a custom template.

In the meantime, I'll remove the getItemLabel section from the docs.

[fernandopena]

Thanks @kadoshms!