# How do I build a searchable dropdown?

**URL:** <https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211>\
**Category:** How do I?\
**Created:** [September 5, 2023, 1:46pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211 "2023-09-05T13:46:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\
**Post date:** [September 5, 2023, 1:46pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/1 "2023-09-05T13:46:17Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/572d48f26b8e430c18c72f6e4994c6231ce02aea.png)

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/66c469dad56be105705242aaf27173e4d9a09dc2.png)

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?

---

<div class="post-metadata">

**Author:** ![brandon](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/brandon/32/2804_2.png) [@brandon](https://community.weweb.io/u/brandon)\
**Post date:** [September 5, 2023, 4:34pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/2 "2023-09-05T16:34:36Z")

</div>

I was just wondering the same thing! I’m building a comparison tool [similar to this one](https://www.rtings.com/tv/tools/compare/lg-c2-oled-vs-lg-c3-oled/31229/37848?usage=1&threshold=0.10) and noticed their dropdowns are searchable as well.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 5, 2023, 5:05pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/3 "2023-09-05T17:05:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [September 5, 2023, 5:54pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/4 "2023-09-05T17:54:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![elyseholladay](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/elyseholladay/32/3921_2.png) [@elyseholladay](https://community.weweb.io/u/elyseholladay)\
**Post date:** [September 5, 2023, 6:03pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/5 "2023-09-05T18:03:38Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [September 5, 2023, 6:26pm UTC](https://community.weweb.io/t/how-do-i-build-a-searchable-dropdown/4211/6 "2023-09-05T18:26:58Z")

</div>

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.
