React MDBAutoComplete


Topic: React MDBAutoComplete

Mike_Tipper pro premium priority asked a year ago

Hi support,

just a couple of questions regarding the autocomplete in react.

Does it allow 2 way binding???

Example, i have a form where when loaded to edit data has an autocomplete for a list of services. The list of services comes from a remote API, as the user types a list is loaded for the user to select the service.

Now when the form is loaded, the list is empty but a serviceId, serviceName properties are contained in the data for the form to edit.

What is the preferred way to initialize this field when the form is loaded and bind this data with the empty list?? or do i initialize the list with only this item in it??

Also, does the control provide a value and text property??? where the value is the id of the service and text is the name of service??

This would then have the bindings set for the value to data.serviceId and text to data.serviceName

Cheers


Mike_Tipper pro premium priority answered a year ago

Hi Mateusz

Thank you for your reply.

the value property would be great or even an event onRowSelected passing the row object to a function (the onSelect passes a string, if it passed a record it would of been perfect, i could of grabbed the required property from the onSelect).

The onChange fires each time a key is pressed, i just want the final selection from the user to grab a property from the complex type.

Cheers


Mateusz Lazaru staff answered a year ago

I'm not sure if I understood the question well, so please correct me if I haven't.

This example is a good reference to your question. After some modifications, it works in the following way:

  1. it has some default options to select, without fetching data from the api
  2. it fetches the data and updates available options when the query string changes

This is a proper way of binding data to the autocomplete, but probably not the only correct one.

Unfortunately, autocomplete does not handle any extra property like value. I think onChange event could maybe provide more details about the selected option, we will consider adding such feature.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 7.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No