Search on items with pagination

Jehex · 2025-05-02T08:45:47.769+00:00

Hi there ! I have a gallery of images ( from my xano endpoint / database ) and already implemented pagination ( 1 page show 8 items ) and a search bar ( who search in the prompt attribute of my items ) Everything working great except that the search function only search on the current page showed instead of total of items. Would like to know if this is manageable directly on the front end or if this require a specific endpoint. Thanks !

Jehex

2 months ago

Hi there ! I have a gallery of images ( from my xano endpoint / database ) and already implemented pagination ( 1 page show 8 items ) and a search bar ( who search in the prompt attribute of my items ) Everything working great except that the search function only search on the current page showed instead of total of items. Would like to know if this is manageable directly on the front end or if this require a specific endpoint. Thanks !
Jonathan Fors

2 months ago

While I haven't built search with pagination myself, I'd probably approach it like this:
1. Request your items like you're already doing with pagination.
2. Search input would query the database directly with sort/filter, this is simple if you're using Supabase. You'd obviously need to pre-apply whatever filter the paginated array already has, then + the user input.

You'd basically have two different arrays from querying the same table. If the table is huge and querying it directly based on the search input would be slow you could create an index of the specific columns you want to sort (assuming you're using Supabase).

Then from there you’d display it in whatever whatever way you need to. Are you displaying search results separately in like a combo box or is it supposed to reflect directly on the paginated list?
@Jonathan Fors
While I haven't built search with pagination myself, I'd probably approach it like this:
1. Request your items like you're already doing with pagination.
2. Search input would query the database directly with sort/filter, this is simple if you're using Supabase. You'd obviously need to pre-apply whatever filter the paginated array already has, then + the user input.

You'd basically have two different arrays from querying the same table. If the table is huge and querying it directly based on the search input would be slow you could create an index of the specific columns you want to sort (assuming you're using Supabase).

Then from there you’d display it in whatever whatever way you need to. Are you displaying search results separately in like a combo box or is it supposed to reflect directly on the paginated list?
Jehex

2 months ago

Hi there, thanks for your anwser. Im using Xano, The search results appear directly on the page dynamically, if the user write " girl " it's will display all images who contain girl inside the prompt, Im just afraid to use a process who will call the api each time the user enter a character into the search bar, will figure out, thanks. I think the best is to maybe call the api on a search button
@Jehex
Hi there, thanks for your anwser. Im using Xano, The search results appear directly on the page dynamically, if the user write " girl " it's will display all images who contain girl inside the prompt, Im just afraid to use a process who will call the api each time the user enter a character into the search bar, will figure out, thanks. I think the best is to maybe call the api on a search button
Jonathan Fors

2 months ago

Got it. You could set a delay on the api call so it doesn’t fetch for every character entry. I believe it’s called debounce in NC.

I’ve got a similar setup for automatically saving documents. It only calls the save api if no input was made in the last 1000ms.
@Jonathan Fors
Got it. You could set a delay on the api call so it doesn’t fetch for every character entry. I believe it’s called debounce in NC.

I’ve got a similar setup for automatically saving documents. It only calls the save api if no input was made in the last 1000ms.
Jehex

2 months ago

Nice thanks a lot ! Exact as chat gpt said it's debounce 😛 Will think which way ( dynamic search + delay or call api on search button ) is the best, thanks !
Jonathan Fors

2 months ago

Nice! Best of luck ✌️

Search on items with pagination

Jehex

Jonathan Fors

Jehex

Jonathan Fors

Jehex

Jonathan Fors