We then iterate over all suggestions using the for comprehension to display all suggestions inside the list. Also it controls the visibility by x-show="isOpen". Moving further down, the suggestions container will be rendered when there are any suggestions are available (we did set-up this in mount before). We want to close the popup when the user clicks anywhere outside of our autocomplete field - that’s what the does. We bind this using the x-data="autocomplete()" attribute on the autocomplete container. This is handled by alpine using the autocomplete function. We do not want to track the open / close state of the suggestions popup on the server. This template contains a mixture of Alpine.js code and embedded Elixir. Sadly GitHub Gist does not support LEEx ️😢 Best thing is, that the whole solution is only around 140 LOC (that’s great, isn’t it?). That’s how the final result does look like. This will provide a better overall UX and makes the autocomplete snappier. We use Phonix LiveView and utilise Alpine.js to avoid unnecessary round-trips to the server.
Our autocomplete will provide an item search for items from some kind of game item database. Therefore we are going to build our own autocomplete now. It’s widely supported and is nice for simple use cases, but as soon as you like to style it somehow to display additional contextual data (e.g. Probably there are even more, but all examples I found so far use the HTML datalist element. And even in the official phoenix_live_view_example repo.Interactive, Real-Time Apps by the creator of Phoenix himself Chris McCord.Also, there are a few handling this in Phoenix LiveView like: And yes, there are a ton of tutorials out there for React, Vue, Angular or any other modern frontend frameworks. One would think creating an autocomplete (or typeahead) field is something which has been solved a bazillion times before.
0 kommentar(er)
