How do I build a searchable dropdown?

Ask us anything How do I?
1

I want my users to be able to search for specific images from thousands of images from my database, like so:

image
image1574×714 57.4 KB

Only the first 50 are here in Weweb at the start (when nothing is searched yet)

image
image552×1166 66.7 KB

When the user types something, I can’t seem to get the title that is being searched to pass to Xano. I can only pass a value to Xano when I select something from the drop down.

But I want the search to happen in real time…

In other words, I want BOTH the dropdown and the search - how do I do this?

When I use the search element, there’s no drop down.
When I use the dropdown element, there’s no search.
When I use the select element, I run into the above problem.

Do I need to build this from scratch?

1 Like
2

I was just wondering the same thing! I’m building a comparison tool similar to this one and noticed their dropdowns are searchable as well.

3

I think that at this point you might get this faster by building it. Or one could fork the component, but it’s not possible to use custom components without an agency plan, so wouldnt be very useful to many

4

The library used by the official component has an event for the change of the search. Few months ago I did a custom component that was exposing this event as a workflow, so I can tell you it’s 100% doable.

5

How are these images set up in Xano?

The value should be the id, and the title should be a text field (e.g. title). When the user searches and selects the text, the value id is what you pass back to Xano, and it will know the associated title. (Unless I am misunderstanding what you are trying to do.)

6

I think she actually wants to access the input value that she types in so she can hit Xano with a filter/parameter or whatever you Xano guys have.