Topic: Autocompleter with json

tano pro asked 5 years ago

Hey Guys,


I've just tried this new component, but I have an issue with it. It should work just like a dropdown, should handle object(key, value pairs), but click event handles only text and with reactive forms the ngmodel is not supported in v7.

Is there any example for situation like this?





Damian Gemza staff answered 5 years ago

Dear Tano,

This is proper behavior because handleMouseDown method trims the textContent property for setting the input value of the clicked item.

I understand your answer except for one thing - "  and set the id in the form ".

Where do you want to set the id? Do you want to set the id attribute on the autocompleter input? Or something else? Please describe me this thing, so I would be able to help you with your problem.

Best Regards,


tano pro commented 5 years ago

Dear Damian,

I could make it work. It seems the latest version fixed the trimming issue. I wrote a reactive form with autocompleter and I set manually the value in the form. Your example for reactive forms is not too good, you can see the warning on the console. To use ngmodel and formcontrolname on the same input is deprecated. For me it was wrong since I want to display only the name, but the formvalue should be the id.

[{ id: 1, txt: 'red' }, { id: 2, txt: 'green' }]

I'd just though that this control handles object as well.


Damian Gemza staff commented 5 years ago

We'll change the reactive forms example. Thanks for your report!

Damian Gemza staff answered 5 years ago

Dear @tano 

I'm not sure if I understand your problem well.

Could you please describe it in another way?

What exactly do you want to achieve? Please describe your desired behavior.

Best Regards,


tano pro commented 5 years ago

Hey Damian,

I have a remote call to find options and it is some kind of json object. I'd like display the name property in the list and the input and set the id in the form, just like with a select. The click event on the selection list pass a textContent instead of the given object so I cannot use it. The selectedItemChanged method should pass the selected item, but for mouse click in the handleMouseDown method the text: text.trim() throws exception 'cause it is an object. Should handle object too.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: laptop
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: No