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

Question

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

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

但是我不知道如何将变量放入to: string.这段代码显然不起作用,但我想像这样:

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

然后您可以使用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

如果您愿意,可以保留原始路线和行动,以支持这两种方法.