Load more things on scroll for select input element?

Ask us anything How do I?
1

The last I checked, someone posted about this on July 2022. Just wanted to check if we can do this now?

Basically, i have hundreds of items in Xano, and I want them to display in the “select dropdown” element. But of course, due to speed concerns, I only want the first ~20 to be displayed. As the user scrolls down, more is displayed.

How do I do this? (if not possible what’s the next best alternative? a load more button doesn’t seem to fit with the select input element)

2

You could do this with some custom JS I think, by listening to the scroll position of your container where you’re scrolling your options, and then triggering “pagination”

3

Hi @raelyn,
this is now possible with the new scroll feature.
You can add a “Load more” div at the end of your list (it can be a loader for exemple), give it an id and activate the “Watch scroll position” in the advanced settings. You can also add a conditional display to hide it if you have already load everything.

image
image477×750 30.7 KB

Warning: the id need to be a valid css id, so no space for example.

Then you can add a onScroll workflow on your page. In this one you can check the position of your “Load more” element. If this is at the end of the page you can trigger the fetch.
I advise you to also add this

  • A variable to know if you are already fetching your data (or use the isFetching of your collection) to not load more data that you want (the onscroll can be trigger a lot of time while you are fetching)
  • A variable to remember previous position of the element, so by comparison you can know if the person was scrolling down or not.

It’s a workcase which still need some polish on our side, so please do not hesitate to give feedback and explanations about what can make your life easier :slight_smile:

4

Nevermind, I was describing what is available for a “Load more” on the page.
For a select dropdown, the feature is already implemented.
You need to toggle Advanced Options > Infinite Scroll

image

5

Does the infinite scroll work for back end data, not just front end?

Additionally, if I check ‘searchable’ on, it won’t search the back end data properly, right? As it’s only searching the first 20 objects?

6

Hi @raelyn,
the infinite scroll is purely frontend. It handles the fact that you do not want to render all the elements, but you still need to give it the full array to work on.

7

Oh! I see! If so, what would be the best way to “load” more elements from Xano as the user scrolls for this select element? (basically the infinite scrolling but for back end data)?

And also have it be searchable and search the back-end data, similar to a search bar but in the select element in weweb.