Combo autocomplete dropdown - type and search or choose from the list

Hi Guys, I have been trying to incorporate the auto-complete search function with the highlighted letters in the dropdown into a combo dropdown pattern. My plan was to augment the dropdown ‘1’ with the search/highlight functions of the dropdown ‘2’, but it hasn’t worked out so far…

Please anyone can help me!
I attached the file for you help.
Autocomplete dropdown.rp (283.5 KB)

Natalie

1 Like

Hi Natalie!

I think this is what you want. Note that this relies on 4 global variables (that you’ll see in the global-variables list). Make sure you create those in the file before you paste this into it. (Normally I use widget text instead of variables for this very reason, but I made this file a long time ago and I’m too lazy to change it.)

I added a column to the dataset to indicate whether or not a (duplicated) row should be above the line.

The performance isn’t great due to the number of rows. I added some code to the OnKeyUp interaction that speeds up the search by a lot (it limits the results to 10 rows – the number that are visible at a time in the scrolling area – when the field is not empty), but it’s still slow when you delete the last character, and it’s slow when the prototype loads. Since this is just a prototype, it might make sense to delete a bunch of countries from the dataset.

Autocomplete_Repeater.rp (104.4 KB)

[ Edit ] The browser sometimes adds a deletion “x” to the field when it’s not empty if the field type is Search. You get no message whatsoever when it’s clicked, so I’d change the field type (via right-click) to Text and implement your own “x” if you want it.

1 Like

Thank you so much, Joseph!
It is exactly what I need! :slight_smile:

Hi Joseph,
I just updated your file with new styling. Without your help I would never complete it!
Autocomplete_Repeater (1).rp (201.8 KB)

Hi Natalie,

It looks like your problem is solved but I made something similar in the past and performance was pretty good

https://www.instagram.com/p/BLERRnYg-NU/?utm_source=ig_web_button_share_sheet

Good luck with your prototype!