Is there onSelect event for the Autocomplete component?

2 Answers 1932 Views
AutoComplete
Randy
Top achievements
Rank 1
Iron
Randy asked on 14 May 2021, 04:20 PM

We are using the auto complete component that does a fetch for server side data based on the users entered text. We need to take action once they select an item from the list.

I don't see an onSelected event for the Autocomplete box. We did see it on (I believe) the combo box. Image of event attached.

We tried the combo box but didn't get the functionality we were looking for with the typeahead search.

The closest thing I found to working around the issue was to use itemRender and attach the click event to the div, but this is more of a hack as you can click just outside the div and still select what you want without firing the onclick.

 

const itemChildren = (
            //TODO, How can I add the onclick to the LI instead of this div.
            <div onClick={onClickPatientSelect} style={{ width: "100%", backgroundColor: "lightseagreen" }}>
                { li.props.children}
            </div>
        );
        return React.cloneElement(li, li.props, itemChildren);

 

 

Here is the current autocomplete code

<AutoComplete
            data={searchPatientData}
            value={searchText}
            onChange={onChange}
            textField="SearchDisplay"
            placeholder="Search for a patient"
            loading={loading}
            itemRender={itemRender}
        />

2 Answers, 1 is accepted

Sort by
0
Terry
Top achievements
Rank 2
Iron
answered on 14 May 2021, 09:09 PM
When the user clicks an entry in the Autocomplete component it fires the onChange event. I think that's what you are looking for.
Terry
Top achievements
Rank 2
Iron
commented on 14 May 2021, 09:14 PM

This gives a decent example https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/binding/
0
Stefan
Telerik team
answered on 17 May 2021, 07:06 AM

Hello, Randy,

This can be done indeed on the onChange event as Terry suggested.

The specific part is that the onChange will be fired when the user types as well, but we can differentiate it by checking for the event type:

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

Also, the ComboBox has a suggest option that provides similar type-ahead functionality:
https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/suggestions/

Regards,
Stefan
Progress 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/.

Tags
AutoComplete
Asked by
Randy
Top achievements
Rank 1
Iron
Answers by
Terry
Top achievements
Rank 2
Iron
Stefan
Telerik team
Share this question
or