Primeng: Template for selected item in autocomplete (single selection mode)

[stephanie-dm]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ x ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

It's already possible to define an "item" template for the suggestions of the autocomplete, but this template is not used for the selected item. The selected item only looks at the "field" attribute, so it can only display 1 property of the object to which the ngModel is bound.

It's also possible to define a "selectedItem" template, but this template only seems to work in multiple selection mode (as stated in the documentation).

I've tried this example:

<p-autoComplete [(ngModel)]="customer" [suggestions]="customerResults" (completeMethod)="searchCustomers($event)" field="name">
  <template let-customer pTemplate="item">
    {{customer.name}} {{customer.firstname}}
  </template>
  <template let-cusstomer pTemplate="selectedItem">
    {{customer.name}} {{customer.firstname}}
  </template>
</p-autoComplete>

With this code my selected item only shows the "name" property of my customer-object. If I don't provide the field-property, my selected item is displayed as [object Object].

Expected behavior
I expect it to be possible to define a template for the selected item when the autocomplete is in single selection mode. It seems like I'm missing something as no one else seems to be asking this question, but I've tried everything I could find in the documentation, and nothing seemed to work.

Minimal reproduction of the problem with instructions

• Angular version: ~2.4.0
  

• PrimeNG version: 2.0.1
  

• Browser: [all ]
  

[cagataycivici]

This should be fixed in recent PrimeNG release, please try with it and if the issue persists drop a comment with along with a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[stephanie-dm]

@cagataycivici : I can still reproduce this issue starting from the Plunkr you provided (this uses PrimeNG 4.1.0.RC2 if I'm correct):
http://plnkr.co/edit/vKhkap?p=preview

[cagataycivici]

Ok reopening then to be reviewed. Thanks.

[SIlver--]

Is this planned for a new milestone?

[riisi]

I'd also like this functionality.

[andrewaston13]

I also need this functionality

[wautersj]

Any news on this? Recent install, and still running against this issue. Tho it is documented in the spec: https://www.primefaces.org/primeng/#/autocomplete

[cagataycivici]

In single mode, there is an input so can't think of a way to use the selectedItemTemplate and the input at the same time so that's why it was closed I guess. Not sure how we can offer templating for the value prop of the input field.

[stephanie-dm]

@cagataycivici : I don't understand what you mean by your last comment. Is something unclear about my initial question?
In the example of my Plunkr: When I select "Smith John" in the autocomplete, I'd like to see "Smith John" instead of "Smith" in the input field of the autocomplete. Currently it's not possible to display more than 1 field/property of the selected object in the input of the autocomplete. This should be possible just like you can already define a selectedItemTemplate for the multiple selection mode and just like you can define an itemTemplate for the items in the suggestion list of the autocomplete.

[sometime]

I also need this functionality

[togbyte]

I need this functionality too.

[Yoshi9143]

@cagataycivici I've implemented templating before using contenteditable="true" on a div. I did this in AngularJS using uib-typeahead. Unfortunately the new Angular implementations all require the selector on an "input" which makes this difficult. I'm hoping PrimeNG can implement it so it uses a <div> with contenteditable="true" in place of an <input>

[flix-]

Workaround using conversion method:

Lets say we have a User type:

interface User {
  firstName: string;
  lastName: string;
}

Use:

<p-autoComplete [field]="myUserConversionMethod" ...></p-autoComplete>

And in Component:

public myUserConversionMethod(user: User) {
  return user.firstName + ' ' + user.lastName;
}

[ben12]

Workaround works, thanks.

I notice a mismatch between code and documentation...

In the documentation 'field' is declared as 'any'.
So, I can use a conversion method or not (description suggests that i can not) ?

Name | Type | Default | Description
-- | -- | -- | --
field | any | null | Field of a suggested object to resolve and display.

In AutoComplete component, 'field' attribute is declared as 'string'.
I must not use a conversion method ?

    @Input() field: string;

This needs to be clarified.

[dydFreeman]

@flix- can you provide a stackblitz with the workaround? _[field]_ conversion doesn't seem to work.

[ironbirdie]

Same issue with angular 8. also related the attribute field can only be of type string. If it's a number it gives following error:

ERROR TypeError: itemValue.trim is not a function
at _loop_1 (autocomplete.js:398)
at AutoComplete.push../node_modules/primeng/components/autocomplete/autocomplete.js.AutoComplete.onInputChange (autocomplete.js:409)

[rafa-as]

@cagataycivici We also need this functionality.

A very bad workaround with a weird flickering:

@ViewChild('inputSearchTerm', {static: false}) inputSearchTerm: AutoComplete;

_searchTerm: string;

onSelectItem(item: any): void {
  this.inputSearchTerm.inputEL.nativeElement.value = this._searchTerm;
}

[adamzawalski]

Hi all,
is there an update to show more properties than just one.
I am using "primeng": "11.3.2", with "angular": "11.2.7" and when trying to workaround from @flix- I get an error:
Type '(user: User) => any' is not assignable to type 'string'.