If you want a LiveView-native alternative that doesn’t require tinkering with 3rd-party JS libraries, you could try LiveSelect.

If you do, I’d be interested in your feedback.

I’ve been trying to figure out what I’d like to do for my search/select in my application and this is exactly what I was looking for!

The only thing that has me wondering if I’d rather use TomSelect is that I notice that the keyboard selection seems to do a round trip to the server, which makes it feel a little slower compared to a typical select widget. I’m not great at writing components yet, but maybe I’ll start with this and maybe contribute back at some point if I figure out how to make selection local.

LiveView is server-side rendered, so every update requires a round-trip to the server. Using code on the client will - other things being equal - always be faster and more reactive.

For live_select, I tried to remove some unnecessary round-trips: for example the live_select_change event is now generated directly on the client (it used to be generated on the server, then sent to the client, then forwarded to the parent from the client).

I’m sure one could take it further: for example arrow-key navigation of the items in the dropdown could probably be implemented on the client (it’s just a matter of applying the right class to the currently active item).

Thought experiment: you could take it to the extreme by annotating the component with phx-update="ignore" and have the hook do all the work At that point you’d have the best of both worlds: quick response times + easy integration with LiveView. Don’t know if it would be so much fun to write though One could also take an existing JS library and try to wrap it into a Phoenix component… also probably not much fun!

Anyway, I’m digressing. If you want to contribute, I’d love to hear from you!