caspg
Real-time Search with Phoenix LiveView and Tailwind
Hi everyone,
I recently implemented a real-time search feature in a Phoenix application using LiveView and Tailwind, and I wanted to share the code with the community.
The code includes an example of how to use LiveView to dynamically update the search results based on user input, as well as some optional TypeScript code to allow users to navigate the search results using the keyboard (up and down arrow keys).
You can check out a demo of the feature in action at travelermap.net (search bar is in top right corner), and I have to say, the results are super cool 
! The real-time updates are seamless and make the search experience much more intuitive.
Here’s a link to the code on GitHub:
Let me know if you have any questions or feedback!
Most Liked
milangupta
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))
caspg
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.
caspg
@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.
Popular in Guides/Tuts
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"