Real-time Search with Phoenix LiveView and Tailwind

This is really awesome, and love that you made it for parks! Loved flying in to look at the different parks and read about them. The search is great too Thanks for sharing!

I’m glad you found it interesting The flying on the map is handled purely by MapLibre lib. I only had to make it play nicely with LiveView

Thanks for sharing, always love checking out other liveview projects.

Random side question, how did you do your modals? I see you aren’t using the URL style like in the generators. Are you using a send_update or something?

Edited to add: i see the search modal is just JS, but to open like the wikipedia modal, is this similar?

Wikipedia modal is pure JS. I created this website as a static, non-live phoenix app. Now, I’m in the process of migrating to live views. But still, I think modals should be opened with JS commands to avoid round trips to the server.

Very nice! What mapping component are you using?

In a new Phoenix 1.7 app you get core_components.ex with a modal example it it. I’ve modified it into a TailwindUI modal:

    <!-- Logout confirmation modal -->
    <.modal
      id="confirm_logout"
      on_confirm={JS.navigate(~p"/logout")}
      on_cancel={JS.hide(to: "#confirm_logout")}
    >
      <:title>Logout</:title>
      Are you sure you?
      <:confirm>Logout</:confirm>
      <:cancel>Cancel</:cancel>
    </.modal>

No server side things at all. Check out 1.7

@ghenry I’m using 1.7 I was just referencing the previous comment asking if I’m using send_update.

@maz I’m just using https://maplibre.org/projects/maplibre-gl-js/. The map is rendered as separate LiveView with sticky: true option so it’s not re-rendered between navigations.

Awesome chunk of code. Thanks.

Thanks for sharing it! I was looking for exactly this functionality. THANKS A LOT!

Really neat ! Thank you ..
I have been trying to figure out a fuzzier search than ilike .. try adding this .. helps with spelling mistakes etc.

    |> where(fragment("SIMILARITY(p.name, ?) > .30", ^search_query))
    |> order_by(fragment("LEVENSHTEIN(p.name, ?)", ^search_query))