This is a migrated thread and some comments may be shown as answers.

Autocomplete from data service

5 Answers 439 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 09 Sep 2019, 05:48 PM

I've reviewed the examples here:

https://www.telerik.com/kendo-react-ui/components/dropdowns/autocomplete/

None of the examples show filtering data via a service of some sort.  All the data sources are local arrays.  Is it possible to use the KendoReact AutoComplete component with a dynamic data source?  I've tried to work through it and when I retrieve the data based on the current value the pop-up closes.  My unfiltered data source has 4000 records so obviously it's not ideal to retrieve the entire data source and store it locally.

-----------------------

   <AutoComplete 
     data={ userListing } 
     onChange={ this.coordinator_change }
     placeholder="Type coordinator name"
     textField="DisplayName"
   />

    if (event.target.state.value && event.target.state.value.length > 1) {
      this.getUserListing(event.target.state.value);  // this method updates the userListing collection
    }

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 10 Sep 2019, 07:18 AM

Hello, Mark,

When filtering the data on the server, the idea is to make a request on the onChange event, and when the response is received to set it in the state.

I made an example showcasing this:

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

I hope it can prove helpful.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Mark
Top achievements
Rank 1
answered on 10 Sep 2019, 02:59 PM

I was using the onChange event, but I had neglected to utilize the "loading" property.  After implementing the solution according to your sample, it still isn't working as expected.  My code is wrapped in a SharePoint Online webpart, and the AutoComplete lives in a grid cell.  The react version of this control just doesn't appear to work as smoothly as the one I've used in the past with the standard Kendo UI library.  The delay when typing won't work for this implementation.  I think I'm going to use a dropdown, loaded after the user types at least two characters into the filter, to pare down the results, and then use the filter method from there.

Thank you very much for taking the time to post this code snippet.  I appreciate the quick reply.

0
Kiril
Telerik team
answered on 12 Sep 2019, 11:28 AM
Hi Mark,

Based on the sample my colleague provided, i can suggest some improvements in the code-sample. The delay in the typing was introduced by incorrect setState logic for the AutoComplete value.

I'm attaching the example bellow, in case you find it useful.

https://stackblitz.com/edit/react-4gcgfa-uxrwjm

Please let me know if you need further assistance, and i will be more than happy to help.

Regards,
Kiril
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Pawan
Top achievements
Rank 1
answered on 19 Sep 2019, 05:30 PM

Hi,

In the samples provided I can see when user selects any autocomplete value onchange again fires which again sends call to server.

How can this be stopped.

0
Stefan
Telerik team
answered on 20 Sep 2019, 05:42 AM

Hello, Pawan,

What I can suggest in this case is to check if the current value that is selected is already available, and if it is, to not make a request:

https://stackblitz.com/edit/react-4gcgfa-puedzs?file=index.js

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mark
Top achievements
Rank 1
Kiril
Telerik team
Pawan
Top achievements
Rank 1
Share this question
or