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

Question

我在弄清楚如何在 Phoenix 框架的 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

如果您愿意，您可以保留原来的路线和操作以支持这两种方法。