Async suggestions

[Chrissi2812]

This allows to use async functions for items and onFilter.

Keep in mind first the items will get loaded an then the onFilter will run over them.
So maybe use an empty items array and query your backend in the onFilter function.

Little Example:

{
    items: [], 
    onFilter: async (_items, query) => {
        return await fetch(`https://yourapi.com/${query}`);
    }
}  

Possible Breaking Change

onFilter and items function are not called onExit.
Otherwise the onExit callback would be delayed until both other functions are finished.

Fix #755

[Chrissi2812]

I had to change the sprite loader because it didn't worked after enabling @babel/plugin-transform-runtime for the promises

[samjarmakani]

Hi, is this being merged soon? I'm trying to fetch suggestions from an API endpoint like so:

onFilter: (items, query) => {
    if (!query) {
        return items
    }

    return new Promise((resolve, reject) => {
        axios.get('/api/users/at/?name='+query)
        .then(res => {
            resolve(res.data)
        })
    })
}

But it doesn't resolve and instead just returns a Promise. I'm assuming async will solve this?

[hanspagel]

We do our best to get through the backlog of PRs and issues in all related repositories, but give us some time, especially for things that lead to breaking changes. 😬

[samjarmakani]

We do our best to get through the backlog of PRs and issues in all related repositories, but give us some time, especially for things that lead to breaking changes. 😬

Oh of course, I totally understand. Please take your time.

Thank you for the response!

[samjarmakani]

Hi, any update? :)

[hanspagel]

Thanks @Chrissi2812! 🙌

[samjarmakani]

Would we be able to get a working example of async data?

I've left the items array empty and am fetching the users from an API endpoint:

items: [],
onFilter: async (_items, query) => {
   return await fetch(`/api/users/at/?name=${query}`);
}

The data being returned from the endpoint is in the exact same format as the examples, but it doesn't get loaded into the popup. It just says "No users found".

[samjarmakani]

Solved using this code in the onFilter method:

onFilter: async (items, query) => {
                                return await new Promise((resolve) => {
                                    axios.get('/api/users/at/?name='+query)
                                    .then(res => {
                                        resolve(res.data)
                                    })
                                })
                            }

[dadigu]

I have a quick question regarding this feature, How would you go about debouncing the request? Since a request is made on every query change, I'd like to debounce it for at least 500ms so the user isn't spamming the api while typing.

Thanks

[hanspagel]

Try to wrap it in an async debounce function: https://www.npmjs.com/package/debounce-async

Hope that helps!

[dadigu]

Sweet! worked like a charm, Thanks!

new Mention({
  ...
  onFilter: debounce(this.onFilter.bind(this), 500),
  ...
})