Autocomplete Search Component with Phoenix LiveView and AlpineJS
These days, the most commonly spoken “buzzwords” in the Elixir community are — Phoenix LiveView, TailwindCSS, and AlpineJS.
And true enough, if you do a little bit of google searching, you will find plenty of blog posts, podcasts, and video tutorials that do a comprehensive overview of those technologies.
At Mindvalley, I have been working with Phoenix LiveView and TailwindCSS for about a year now. Both technologies have drastically improved my productivity as a web developer, allowing me to focus on coding the business logic rather than figuring out the overly technical nitty-gritty implementation details.
Last week, I finally got the chance to try out AlpineJS for the first time. And I was very pleasantly surprised by how easy it was for me to install and start using it as a part of one of the Phoenix LiveView projects under my care.
In today’s blog post, I want to show you how to combine Phoenix LiveView with AlpineJS to create simple and elegant solutions to otherwise complex problems.
As a concrete example, I will walk you through the process of implementing a dynamic, autocomplete search component with the technologies mentioned above.
