How to get a selected object for AutoComplete

ADMIN

Filip

Posted on: 29 Jun 2022 07:13

Hi, Philip,

As requested I am converting this thread to an official feature request.

Regards, FilipProgress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Philip

Posted on: 28 Jun 2022 14:48

This would make it harder to search/select since an object array can have the same field value, in this case is "name". What makes it distinguishable is the "id" field. I am sure there is a way to make this work? or could you submit a feature request for this?

ADMIN

Filip

Posted on: 28 Jun 2022 12:27

Hello, Philip,

In order for the keyboard navigation to work, the value that is being used for the textField prop has to be unique, this behavior is by design, since when the user types in a value in the component, it is hard to determine which value has to be autocompleted since they are all the same.

I hope this helps.

Regards, FilipProgress Telerik

The Premier Dev Conference is back!

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.

Philip

Posted on: 27 Jun 2022 20:57

I had to get a ref to AutoComplete and passed a callback handler to itemRender prop,

itemRender={(li, itemProps) =>
customItemRender(li, itemProps, onSelectedIcon)
}

and then override "onInputKeyDown" to get the right selected object.

AutoComplete has an issue on key navigation when an object array has the same textField value.

Below example, a keyboard selection does not work for id=11 and 12.

Ex.

ADMIN

Filip

Posted on: 27 Jun 2022 12:38

Hello, Philip,

Thank you for the provided clarification. Currently, the AutoComplete gives a text value instead of the entire dataItem. In order to find the object, the developer needs to find it based on the text value using array.find.

I hope this helps.

Regards,
FilipProgress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Philip

Posted on: 24 Jun 2022 22:17

event.value return string, but I would like to get the object itself. In this case,

{id:10, name:"test"}
=> I forgot to mention that I have a custom "itemRender".

ADMIN

Filip

Posted on: 24 Jun 2022 09:02

Hello, Philip,

By selected object, I assume that you want to retrieve the selected value of an item. If that is the case, the value can be obtained from the event.value. Here is a small example that showcases this approach using the onChange event:

https://stackblitz.com/edit/react-uyfsek?file=app/main.jsx

In case this is not what you are looking for, can you please provide more information on your requirement?

I hope this helps.

Regards, FilipProgress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.