optimistic-gold•12mo ago

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

kapa.ai•12mo 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•12mo ago

<@367778590974148608> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•12mo ago

Hey @raulcruztorres, By default, useAutoComplate works without pagination. You can enable the pagination like kapa.ai says.

optimistic-gold•12mo ago

I did it, but pageSize and current do not change on scroll, so I always get the first 10 values of my collection

conscious-sapphire•12mo 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.