Admin: Created page with " # lib/my_app_web/live/json_search_live.ex defmodule AppWeb.SandboxLive do use AppWeb, :live_view def mount(_params, _session, socket) do {:ok, assign(socket, text: "Hello world! This is a test. Hello again!", search: "")} end def handle_event("search_change", %{"value" => search}, socket) do {:noreply, assign(socket, search: search)} end def handle_event("text_change", %{"value" => text}, socket) do {:noreply, assign(socket, text: text..."

2025-07-31T14:58:30Z

Created page with "<source> # lib/my_app_web/live/json_search_live.ex defmodule AppWeb.SandboxLive do use AppWeb, :live_view def mount(_params, _session, socket) do {:ok, assign(socket, text: "Hello world! This is a test. Hello again!", search: "")} end def handle_event("search_change", %{"value" => search}, socket) do {:noreply, assign(socket, search: search)} end def handle_event("text_change", %{"value" => text}, socket) do {:noreply, assign(socket, text: text..."

New page

<source>
# lib/my_app_web/live/json_search_live.ex
defmodule AppWeb.SandboxLive do
use AppWeb, :live_view

def mount(_params, _session, socket) do
{:ok, assign(socket, text: "Hello world! This is a test. Hello again!", search: "")}
end

def handle_event("search_change", %{"value" => search}, socket) do
{:noreply, assign(socket, search: search)}
end

def handle_event("text_change", %{"value" => text}, socket) do
{:noreply, assign(socket, text: text)}
end

def render(assigns) do
~H"""
<div class="p-4">
<h1 class="text-xl mb-4">Search Test</h1>

<div class="mb-4">
<input
type="text"
value={@search}
phx-keyup="search_change"
placeholder="Search..."
class="w-full p-2 border"
/>
</div>

<div class="mb-4">
<textarea
rows="4"
phx-keyup="text_change"
class="w-full p-2 border"
><%= @text %></textarea>
</div>

<div class="border p-4 bg-gray-100">
<%= if @search != "" do %>
<%= raw(String.replace(@text, ~r/#{Regex.escape(@search)}/i, "<span style='background: yellow'>\\0</span>")) %>
<% else %>
<%= @text %>
<% end %>
</div>
</div>
"""
end
end

</source>

Liveview Text Search and Highlight Example App - Revision history