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

然后您可以使用控制器中的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）

1 个答案: