Is there a way to combine the search bar with a dropdown menu so users can:
- Use the search bar to filter the results in real time
- Use the dropdown menu to select a specific item
Yes, there definitely is 
You can filter the collection directly on your backend and then feed the data from it to both the select and your display of your properties - Residences.
I think in xano you can do that as well, but what I’d do in Supabase would be,
- Set up a collection
- Go to Filter → Add filters, that if null, will be ignored, in your case it would be something like this:
- On change, coupled with debounce, I’d trigger a collection update, in my case of the employees collection.
- Bind the results to both select and display of your properties
1 Like
Any chance you could expand on this response about a search + dropdown filters?
I’m aiming to build a nice search experience on a large photo gallery (from Supabase). I found the WeWeb templates library and realized it HAS the exact search experience I want to replicate.
A search bar users can type in anything and the gallery will filter based on the search terms (image metadata).
AND a set of dropdown filters that filter the gallery as well. See the screenshot from the WeWeb templates library.
I’m using multiselect for the dropdowns, is that the right approach? And I assume the “trigger collection update” depends on how your data is being pulled in from Supabase?
Happy to try and answer this — but first, I just want to clarify something I assumed.
I took @mander to be describing a typical autosuggest search pattern: as a user types into a search field, a dropdown appears with suggestions that match the input. You can use arrow keys to navigate the list and select an option. Here’s an example from PayPal for address suggestions:
@gldnlab, what you’re building seems a bit different. If I understand correctly, you want both:
- A free-text search (with or without autosuggest), and
- Structured filters (like Country, Tools, etc.)
In my app, I don’t have a “search to filter” setup per se, but I do use custom multi-select filters extensively. Every time a filter is selected, I re-fetch both the filtered content and the filter options for that page. I think what @Broberto is suggesting is that your search field has a workflow attached to it that is triggered On change so that as you type, it refetches the collection. I suppose you could do the filtering all on the front end and filter your collection on the value of the text field but without much more thought I feel like this is reserved for simpler use cases (maybe not).
I don’t see any major reason why you couldn’t combine free-text search with structured filters, but it’s worth considering how they interact. For example, using your screenshot: if I type “Studio” into the search, should the Country filter show all available countries? Or only the ones that have partners with “Studio” in their metadata?
- Option 1 (Show all countries): Gives the user a broader view, but risks showing filters that return zero results.
- Option 2 (Only show countries with matching results): Improves relevance but requires more backend logic and dynamic filtering.
To put it in SQL terms, you might be doing something like:
SELECT *
FROM Partners
WHERE metadata CONTAINS 'studio'
AND (Tool IN (...))
AND (Country IN (...))
Tying this all together, here is a snapshot of how I set mine up:
1 Like