To build a (fake) autocomplete dropdown, first create an autocomplete (partial search) api endpoint, then using a text field and dynamic List (or table) build the UI and use the set value action to fake the interaction
See demo below. Because of the low frame rate in the gif it appears to be slow but it’s actually really fast even in the simulator. On a real device it works perfectly.
Since currently there is no autocomplete search box i’ve been thinking about a way to fake one by combining some elements. Finally got the chance to put my idea to work and it seems to work pretty good with some few shortcomings here and there.
The main idea is to first get or build a partial search api endpoint where you will be getting the data from.
The you attach your search input to the text field. On text changed event of the text field you make an api call to your partial search endpoint with whatever text that user has currently typed.
So as you will imagine, your api has to be running very fast. It was for this reason that i built an index in algolia search for my api and for those who know algolia, its really fast. I tried with bubble with just a small list of values (10 rows) and it was pretty fast but i suspect for large data it might be slow and may not be that responsive to the users typing.
The demo you see here is using an index with 522 rows.
The rest is basically using set value to show and hide the dynamic list based on the current input of the text field.
In my case i started making the api calls when the user has entered two characters (you can choose to make yours one). My data has a lot of same first characters so it doesn’t make sense making the api call on the first character input.
The main shortcoming here is that the dynamic list height is not dynamic (pun intended). This means that when there is not many results from your api search to fill the whole height of your dynamic list, there will be some empty gap. In my case here, i masked that a bit by making the background color of both the dynamic list and page the same.
I actually had a perfect idea how to work around this but unfortunately dropsource behaved strangely. The idea was to make the list background transparent and make the list tile have a background. So that even when the results is shorter that the height of the list there wont be that gap. Unfortunately, strangely when i set the background of the list to transparent it makes the tiles also transparent. That is weird to me giving that if i set the background of of a list to a color and the tile to another color it doesn’t overshadow the tile. So i don’t understand why setting it to transparent should affect the tile. @Dropsource maybe you can explain this to me.
I haven’t tried with IOS by i expect one to hack something like this too. Though i searched the properties of the text field and i couldnt find a lengtht field which is really needed for this hack.
If i find time i will provide a detail walk-through with screenshots for the whole control.
Oh and by the way i had to put the search by algolia at the bottom since i’m required to for their free plan