[Tips and Tricks] Autocomplete search box dropdown


#1

tldr
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 :grin:

Happy dropping.
seanhoots


Dynamic Filtering a List
Parkland iOS App
The Goodness App - Android
#2

@seanhoots thanks and hope you find time soon


#3

Ok so here is an example of faking an autocomplete dropdown.

Places Autocomplete app demo

In this example i modified the Dropsource Places app demo.
And instead of using the google places search api i used the Google Place Autocomplete api.

So why am i using the Place Autocomplete api instead of the Place search api? Because as the name suggests this api allows you to submit a partial search string and it will return some place predictions which is exactly what we need.

Here is a link of to a swagger specification for the google place autocomplete api i created in stoplight.
If you want to try it download or copy the file into text

https://api.stoplight.io/v1/versions/Eu2GGPeXzXsrngopH/export/oas.json

I send the api request on text change of the search input and the results are displayed in a dynamic list.
I just styled the dynamic list to make it look like a dropdown.

The rest of the app remains the same as the dropsource demo.


[Resolved] How do i enter an address in dropsource
#4

This is extremely cool @seanhoots :tada: :boom: :100:


#5

Hi @seanhoots do you have a breakdown of the values and actions you set to achieve this?


#6

I don’t have it written down but there are many elements and actions used for this but its not that difficult.
There is a text input element which has an action to make the api call when the text input changes (and length of text is greater than 1).
Then there is the dynamic list element which is bound to the results of the api call.
It is normally hidden and its unhidden in the api 200 response.
The dynamic list has a transparent background the the tiles which contains the text itself has the white background.
It has an action to set the text input the clicked cell and then hide the list element again.
The close button inside the input has an action to clear the text input .
I think basically that’s it.


#7

I wish it was possible to make a dropsource project public so other people can view the design and workflows.
@sue please can you consider this a feature request if you don’t already have it.
That is ability to set privacy options for a project - Private, Public View Only, Public Edit.
Note that this is slightly different from the collaboration feature though one can implement them as a single feature.
In this case i could have just shared my project link and anyone who wants to replicate it can easily take a look at all the events and actions.


#8

Yep that’s definitely different from collaboration (which we’re working on) and a new request I don’t believe we’ve discussed before but can definitely see how it would be useful so feature request noted!


#9

I like this idea too.


#10

HI,

I am a newbie here and looking for some help with autofill. I have created a google places api and corresponding key on google. Google does not provide a specification file but just provides a url that expects input parameters and key. I am having trouble in even loading the API as dropsource either asks for a URL or a specification file. If I enter a URL that google provides, it errors out as google is expecting even input parameters. Here is a sample url in google for calling places api

https://maps.googleapis.com/maps/api/place/autocomplete/json? input=Vict&types=geocode&language=fr&key=YOUR_API_KEY

Thank you for your help
ssk


#11

Hi @ssksubash, if you read up this thread i explained how to create the autocomplete including the specificaiton file i created for the autocomplete.
If you like you can use what i created.
Here is the link again.
https://api.stoplight.io/v1/versions/Eu2GGPeXzXsrngopH/export/oas.json


#12

Hi @seanhoots, Thank you for your suggestion. I used the spec file and it worked. Since we need to send the key for the api, I created a static value and set is as part of the query parameter. Is that advisable or is there a better way to send the API key every time we make an api call.

I want to make sure that the key is secure and hence asking.

Thank you for your time.


#13

I think that’s the way.
According to dropsource, device variables in Android are encrypted on device.
On IOS you if you will have to store it in a Keychain which will also be encrypted and hence secure.


#14

This description is correct.


#15

I was curious how this would work with Backendless, so I imported a database of roughly 12000 worldwide cities into the database:

Here’s a little live demo of an app showing autocomplete for the city name with that database:
https://app.dropsource.com/simulator?pk=wvkm0req2h88qnr553zx4fmwzg&d=iphone8&pp=0&utm_source=simlink&utm_medium=simulator


#16

This looks great! :tada: Thanks Mark! :raised_hands:

Did you use pretty much the same process as @seanhoots or were there any key differences for using Backendless? There’s a standard parameter for where clauses in Backendless endpoints right? I haven’t tried it - is that what you used here?


#17

Hi @seanhoots, I did not create a device variable but just specified the key as a static value in the query parameter. Do you suggest that I create a device variable instead or just having a static value sent in query parameter is secure enough as the call to google api itself should be TLS.

Thanks,


#18

You don’t need to create a device variable.
And since the data is transmitted securely you should be fine.


#19

thank you @seanhoots


#20

I put together a video which reviews how to use the Backendless API to build the autocomplete function in Dropsource. Hope you will find it useful. Here’s the link to the video:

@sue, to answer the question you asked earlier, yes, the API uses the where clause parameter to customize the search based on what the user typed in the text field.

Cheers,
Mark