i-like-robots/react-tags

Server-side autocomplete example?

yrik opened this issue · 4 comments

yrik commented
Server-side autocomplete example?
i-like-robots commented

Luckily enough, I did this a few days ago 😄: v5.13.0...async-fetch-example

  • 😄1
  • 🎉2
sauldeleon commented

yay!, just looking for this!

sauldeleon commented

example with axios and hooks:

  //initial api call
  const [{ data: labelsData }, doGetLabels] = useAxios({
    url: '/labels',
  })
  
  const [suggestions, setSuggestions] = useState([])
  const [busy, setBusy] = useState(false)
  const handleInputChange = debounce((name) => {
    if (!busy) {
      setBusy(true)
      doGetLabels({ params: { name } })
    }
  })
  //getResponseData is my custom parser for the BE response
  useEffect(() => {
    const labels = labelsData ? getResponseData(labelsData).labels : []
    if (setBusy) {
      setBusy(false)
    }
    setSuggestions(labels)
  }, [labelsData])

Rest of the code remains the same as the @i-like-robots PR

yrik commented

Thanks for the example, seems like there is a small issue @i-like-robots.
The options list is updated directly after the onInput custom handler https://github.com/i-like-robots/react-tags/blob/6.0/lib/ReactTags.js#L130.
However, when I query the server inside of onInput handler it takes some time.
In a result, the options list always contains list of suggestions from the previous call, not the latest one.

  • 👍1