Creating a search bar in a permanent layout (app.html.eex)

Question

It's surprisingly difficult for me to figure out how to create a search bar in the app.html.eex template in the Phoenix Framework. Since the area does not change no matter where on the website you prefer, just simply use the HTML request with the search parameter, so something like this:

<%= button "Search", to: "/search/^search_parameter", method: "get", class: "btn" %>

However, I do not know how I can put a variable in the string: to. This code obviously does not work, but I imagine something like this:

<div class="search">
  <%= text_input :search, :query, placeholder: "Type search query here.." %>
  <%= button "Search", to: "/search/^search_query", method: "get", class: "btn" %>
</div>

I hardly know what a better approach is, and I'm just trying to do it. Therefore, any decision is really welcome.

Answer 1

URL- , Javascript. , , , POST.

# web/router.ex

post "/search", SearchController, :index

:

# web/templates/layout/app.html.eex

<%= form_for @conn, search_path(@conn, :index), [name: :search], fn f -> %>
  <%= text_input f, :query %>
  <%= submit "Search" %>
<% end %>

query

# web/controllers/search_controller.ex

def index(conn, %{"search" => %{"query" => query}}) do
  results = # do the actual search using `query`
  render conn, "index.html", results: results
end

, , .