"On change" for dropdown/select typing?

Ask us anything
1

Hi there, I’m trying to use a select dropdown to read from a large list (8000+ items).

I want to make it so it doesn’t fetch the collection until the user has typed more than 3 characters, and then filters based off those characters.

I’ve found a couple of tutorials on the forums suggesting you can use “On Change” as the trigger, but I can’t seem to surface what the user is actually typing, using the On Change trigger. It only triggers when a dropdown is selected. Is it possible to see what the user has typed before they’ve selected an option?

Edit: From further forum hunting, it looks like this is not possible. Seems like the Search with result container element is probably the best alternative.

2

I think you can create a custom component to achieve this and it shouldn’t be too difficult. I know this won’t solve it all for you, but here’s some ideas to get the wheels turning.

  1. insert a div that looks like a select; insert a text field and static text (the former is used for the type-to-search) while the latter is the display
  2. Insert a div that simulates the dropdown, insert items that are bound to a collection and is filtered by the value of the text field in 1. Then set a rule to open/display the dropdown when the length of the text field in 1 is greater than 3 characters.

The GIF belows shows me using a search field within the dropdown to filter the results. This is only half of what I’m alluding to above. You’d need to combine this with the static display so that when you select soimething from the dropdown it displays and hides the search field.

Clipboard-20250527-194457-410

2 Likes
3

That’s really helpful, thank you - going to play around with it this week!

4

Hey Oli :waving_hand:

let us know if the idea John shared worked for your project!