useAutocomplete Server Side Pagination
I have a controller that renders an autocomplete component. I am using the useAutocomplete hook to get the options with server side pagination, but the query params (_end, and _start) do not change when I scroll.
How can I fix it?
5 Replies
Hi @raulcruztorres. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In the refine framework, the
useAutocomplete
hook has undergone some changes. If you want to enable server-side pagination, you need to set the pagination.mode
prop to "server"
. Previously, pagination was controlled by the hasPagination
prop, but this has been deprecated. Here's how you can enable server-side pagination:
(Source: refine.dev docs (https://refine.dev/docs/migration-guide/3x-to-4x))
If you're still facing issues, ensure that your getList
function in your Data Provider is working correctly. The useAutocomplete
hook uses the getList
function for searching. If you want to change this behavior to make client-side filtering, you can examine this documentation (https://mui.com/material-ui/react-autocomplete/#search-as-you-type).
(Source: refine.dev docs (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/))
If the issue persists, it might be helpful to check your implementation against the useAutocomplete example (https://refine.dev/docs/examples/field/useAutocomplete) provided in the refine documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@367778590974148608> kapa.ai is still learning and improving, please let us know how it did by reacting below
evident-indigo•13mo ago
Hey @raulcruztorres,
By default,
useAutoComplate
works without pagination. You can enable the pagination like kapa.ai says.genetic-orange•13mo ago
I did it, but pageSize and current do not change on scroll, so I always get the first 10 values of my collection
evident-indigo•13mo ago
By default, it does not support infinite list in options. However, we have an example with an infinite list for antd. Maybe you can take inspiration from there and make your own.
Example here: https://refine.dev/docs/examples/field/useSelect-with-infinite-list/
useSelect with infinite list | refine
This example shows how to use the useSelect hook with an infinite list.