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?
kapa.ai
kapa.ai271d ago
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:
useAutocomplete({
pagination: {
mode: "server",
},
})
useAutocomplete({
pagination: {
mode: "server",
},
})
(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: ----------------------
kapa.ai
kapa.ai271d ago
<@367778590974148608> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold
stormy-gold271d ago
Hey @raulcruztorres, By default, useAutoComplate works without pagination. You can enable the pagination like kapa.ai says.
national-gold
national-gold270d ago
I did it, but pageSize and current do not change on scroll, so I always get the first 10 values of my collection
stormy-gold
stormy-gold269d 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.
More Posts
MUI Inferencer Can't Detect Object Inside EntitySo I have the MUI Inferencer working well enough to detect some of my entity fields, but for some reWhat's the easiest way to create a product grid with search option ?when a product tile is clicked, it should show product details page etc. my db is supabase.Custom error messageI want to handle error message whenever i call getList from my dataProvidercustom error messageIn my app, Iam using a lot of forms. if there is an error message from an api call in the backgroundusing the react-i18next example I guess a type mismatchHey everyone, I just started integrating translations into our application and noticed that the docuuseSelect() with paramI have a list Address and I want to fetch list address base on user_id. How can I use useSelect to dInferencer considered a field as a relation and decided not to render itHey guys, could you please help me understand what happened: 1. fields [cust_id, id] returned from Problem in meta and headers in useSelect requestI am not able to use my bearer token in meta and header while using useSelect const { selectProps: useShow() id is NaNHi! I have a page located at companies/show/:id. It's retrieving data using -- `const { queryResultuseSelect isLoading booleanHi! Just wondering if useSelect returns an attribute representing whether it's loaded or not. (btw,Calling reset() removes the whole value from fieldI have upgraded to refine 4 , I am using useForm for handling forms, for some reason when I am calliError With MUI InferencerWhen running Mui Inferencer, I am getting an error stating: ``` Exception: RangeError: Maximum calHas anyone gotten Airtable to work with a Personal Access Token?Hello, I'm just starting out and I'm having a hard time getting my app to work with Airtable; I'm cuconditional useSelectAs hooks can only be called at top level, is there any way possible to call useSelect hook only when