Asynchronous Autocomplete with objects as result

Topic: Asynchronous Autocomplete with objects as result

itkaufmann pro premium priority asked 2 years ago

*Expected behavior*I want to build an autocomplete input that get asynchronous results from my backend. My results are of objects of the form {id: number, postalcity: string}. I now want the options to show the .postalcity attribute, and also want the input to show the postalcity value after selection of an option. All of that works as expected: -> options show the postalcity value and the input as well after one is selected (PERFECT SO FAR!)

enter image description here

However: I want my formcontrol to have the form {id: number, postalcity: string} as well, once an option is selected. But it is always just of the form of the postalcity string.

enter image description here

It only becomes an object if I change/remove the displayValue function, but then value inside the input field also becomes an object [Object, Object].

enter image description here

*Actual behavior*Is it possible to fix that? Can I only show a single object field to the user, while still setting the formcontrol to the whole object if one is selected? Thank you very much in advance!

Resources (screenshots, code snippets etc.)![enter image description here] (https://usercontent.mdbootstrap.com/mdb-images/support/6fc18600-1d5c-4537-b9f1-0118876dde41-Screenshot%202022-11-24%20021140.jpg)