Input with Datalist in LiveView

Hello,

experimenting with LiveView, and particularly with Chris’ auto-suggest demo: https://github.com/chrismccord/phoenix_live_view_example/blob/master/lib/demo_web/live/search_live.ex

I would like to extend this in a way that it continues displaying the datalist’s option values, but in the background sets an option’s id as the field’s value. This would in essence be how select fields work, but with the ability to type.

Unfortunately, datalist doesn’t really support what I need, and a regular select drop-down field won’t work for me, as I am working with huge options lists (related record lookup).

There are various ways for implementing something like this in javascript with an additional hidden field, but I was wondering if somebody might have come up with an idea how liveview could be leveraged for this?

Thank you.

2 Likes