So I’m buildin’ a system for a company covering the whole France. I need a select/dropdown for the cities from a Supabase table (up to 39k records from the Post of the France). Now I’m using a shorted version with 8k cities but still…
If I bind the collection, select element refuses to work.
If I bind collection.data, it generates 8k (-25 as the size of a collection page) of null options and then tries to work, but if the value is not from the first collection page, it doesn’t work, but consumes an enormous amount of memory and CPU.
How to implement this dropdown correctly? I need to show the selected city/town and be able to find a city with the searchable item list. Onchange event should set the PC/ZIP for another field.
Indeed, 8k items is too many for the browser to render without slowing down significantly or crashing. This is not specific to WeWeb. You’ll need to filter and paginate your data in Supabase so it returns a reasonable number of options to render in the dropdown, preferably < 100 to keep things smooth.
So the idea is the following:
have a collection with a pagination that returns only a few dozen items
bind that collection to your dropdown options
as the user scrolls down the dropdown, fetch more and more items
when the user types in something in the search, refetch that collection with those filters
Does that make sense?
Here’s some documentation that might help with this:
EDIT: just saw your post here and it looks like you may already have tried working with paginated data. Could you record a short video showing me how things are setup on your side? I’ll try to reproduce the issue you’re facing on one of my Supabase projects and find a solution for you
Thank you, but that’s a core of the problem. I do have Supabase filtered and paginated by 20 items but if I try to bind it to my searchable dropdown, it generates null entries for every hidden element, so I have collection.data containing of 20 elements and 8060 null elements. Of course, it slows down everything. I’ll take a look at docs you’ve attached. I guess that I’ve already familiar with those manuals.
I think the key is to not use a collection, but use some variables and the Select Database action. There you can define your own pagination that doesn’t have a ton of null values.
Although I do wish the null values weren’t a thing, it’d be so much easier
But how should the “Search” option work? As a concept, dropdown should work with the backend collection and follow the settings of the collection (like pagination as a limit and for an infinite scroll).
Yes, we can use a “Search with suggestions” element as a workaround or create an own dropdown select control, I’m just trying to figure out, how I can utilize the standard component.
I’ve started to record a video and understood that the problem was with the collection itself as Supabase is set by default not to show more then 1000 records.
