在永久布局中创建搜索栏 (app.html.eex)

Question

我很难弄清楚如何在 Phoenix Framework 的 app.html.eex 模板中创建搜索栏。由于无论您在网站上的哪个位置，该区域都不会改变，所以我更喜欢它只是使用带有搜索参数的 HTML get 请求，所以像这样：

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

但是我不知道如何将变量放入 to: 字符串中。这段代码显然不起作用，但我想是这样的：

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

我几乎不知道什么是最好的方法，我只是在尝试一下。所以真的欢迎任何解决方案。

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 %>

然后可以在controller中使用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

如果你愿意，你可以保留你原来的路线和动作，以支持这两种方式。

在永久布局中创建搜索栏 (app.html.eex)

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

search

elixir

phoenix-framework