search

JFusco / react-predictive-input

WAI-ARIA compliant React autocomplete component
https://jfusco.github.io/react-predictive-input
MIT License
7 stars 0 forks source link

Async data loading #2

Open oyeanuj opened 7 years ago

oyeanuj commented 7 years ago

Hi @JFusco, Firstly, thank you for putting out this component!

I was hoping to make use of it in my project, but in my usecase, the data for the autocomplete is coming from the server. So, I was wondering if this component would work well for that use-case?

I was thinking that I'll probably need to do the following -

  1. Debounce onChange although it would be nice to have an option to set a minimum threshold before onChange is fired.
  2. When onChange is fired, make a call to the server.
  3. When the results are returned, overwrite the data object with the new list of options from the server.

Based on that approach, I had the following questions -

  1. Will that work? Or are there issues that you anticipate?
  2. Does the data have to be array of strings? or can be an array of complex events?
  3. Any way to override the default result-item component? (like, if I need to put an image there, etc).
  4. And finally, have you used it any such situation, or have an example or gist of the same?

Thank you!

JFusco commented 7 years ago

Hello @oyeanuj Thanks for checking this out and thanks for your questions. All your points are valid and should be addressed as it's a common way to want to use any kind of autocomplete.

  1. There is an onChange available for use which passes you the new value as you type, which then you can make an ajax call to get new data - then update the state of the <Autocomplete/> data property. For debounce - I would probably add a debounce method in componentWillMount. I'd most likely pull in something like throttle-debounce or react-throttle to help with this. A threshold would be nice to set in this case.

  2. For now, the data has to be a simple array of strings. I anticipated adding more complex data, if you can see in the propTypes I have:

data: React.PropTypes.arrayOf(React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.object ])),

Which either takes an array of strings or an array of objects - but this code isn't finished just yet.

  1. This is something I've worked out on my local machine, but haven't pushed it up to a version yet, because I wanted to write some unit tests first.

I encourage people to help out and submit pull requests, so if you are up for the challenge on points 1 and/or 2 I will gladly write some tests around them and accept a pull request!

You can also always fork and extend this if you have very specific functionality.

Have a good one, Joe