🔗 Create an Address Autocomplete Using Google API, Elixir, and Phoenix LiveView Part 2

In the first post, we saw how we can create a functionality that goes through each technology in the stack:

• An Elixir service module address_autocomplete.ex
• A JSON API endpoint /api/address/query
• A LiveView that displays our UI autocomplete_live.ex
• A JS Hook to add the interactivity needed address-autocomplete-hook.js

The Objective

The objective was to showcase how we can put together all of this available tools that come with each Phoenix application but in reality half of the steps weren't necessary at all!

Let me clarify that.

In this concrete example, going for the path of adding a JavaScript library via a hook and talking to an API endpoint to get the predictions was an overkill. It's not necessary but it was intentional for teaching purposes. I think it can be misleading because I don't want others to think that this is the only way to implement a feature like this one. With that being said, let's explore how we can reduce the scope of tools needed for this functionality.

The Refactor

The truth is that most of the times we can accomplish a lot of things with LiveView alone without the need to implement a JS library or even a JS framework. The LiveView team provides us with some components we can use to implement our own autocomplete.

continue reading on ivanmunguia.dev

⚠️ This post links to an external website. ⚠️