Webstudio
Log in

Join the Webstudio community

Updated 8 months ago

Creating an Auto-complete Feature for a Dropdown in Webstudio

At a glance

The community member is looking for a way to create an autocomplete feature for a dropdown in Webstudio, similar to the one in the attached screenshot. They have not found anything in the Webstudio documentation to help with this. The comments suggest that the community member would need to use a library like Downshift and fetch the data from an API on the client-side, as Webstudio does not have a pre-made component for this. Another idea mentioned is to use a "Select" component from Radix in coordination with a text input, using the input value to constrain the GET request that populates the "Select" component. However, one community member notes that autocomplete/combobox is quite different from just a select and input. The community member eventually coded the autocomplete feature from scratch, and mentions that it might be a good component to add to Webstudio.

Useful resources
TThomas COUDERQ
Hey everyone ! Hope you're doing well 🙂

I'm searching for a way to create an auto-complete feature for a dropdown in Webstudio (similar to the one in the screenshot I attached).

What would be the way to do this in Webstudio ? I haven't found anything in the docs :/

For info the search results are cities in France, stored in my app's Databse that I can call through a GET
O
T
b
7 comments
OOleg Isonen
Currently you would need to use something like Downshift or any other library on the client and fetch the data from the API from the client as well.

There is not much Webstudio is helping with in this case since we don't have a pre-made component for this.
TThomas COUDERQ
Hey Oleg ! Arf, okay thanks, I'm gonna search into this !

Another idea I had in mind was to try using a "Select" component from Radix in coordination with a text input.

I'd use the text input's value as a constraint for the GET that populates a collection inside the "Select" component.

Do you think it could work ? (I'm trying it, but struggling to retrieve the input's value with Javascript)
OOleg Isonen
Autocomplete/combobox is quite different than just select and input
TThomas COUDERQ
Hmmm okay I see.

I'm gonna try and find something then, thanks for your answer !
bbootking
You can use custom code of accordation(html) - <summary> and try to populate it with the data you are fetching- that code can be in <script> that is js which will be making a list of summaries, or <p> as per your choice.

I hope i have understood your question, if not let me know.
TThomas COUDERQ
Update : I ended up coding it from scratch. It's not perfect, but that'll do for now 🙂

Might be a good component to add to Webstudio in my opinion 😁

https://www.lokka-immo.com/
bbootking
its always great if its working XD
Add a reply
Sign up and join the conversation on Discord