javascript - 以漂亮的方式格式化查询参数

Question

我的 Rails 项目中有一个 search Controller ，它响应我 header 中的表单。现在，一切都运行良好，但是当我搜索“something”时，我的 URL 中会出现 admin/users/search?q=something 。我正在尝试使其成为一个更加用户友好的 URL，例如 admin/users/search/something。

我尝试将路线从 get 'search' => 'search#index' 更改为 get 'search/:q' => 'search#index', :as => “搜索。但是，在我的表单上，它要求我显式地输入参数，因此 form_tag admin_search_path, :enforce_utf8 => false, :method => :GET 之类的东西不起作用，因为我我的路径前面需要括号 admin_search_path(something)。

如何为我的应用程序实现“好的”搜索 URL？

Answer 1

您可以使用您尝试过的命名路由以及 :q 参数，并且在您的表单中，我们将动态地将路由参数替换为已输入的搜索词。

首先，像平常一样创建表单，但指定“query”作为搜索参数。另外，请确保搜索词字段 (#q) 没有 name 属性；没有 name 属性的表单元素不会提交到服务器:

<%= form_tag admin_search_path("query"), :enforce_utf8 => false, :method => :get %>
    <input type="text" id="q" placeholder="Enter a search term" />
    <input type="submit" value = "Search!" />
<% end %>

用户输入搜索词并单击“提交”(或按 Enter 键)后，我们将用实际搜索词替换路由的 query 部分，以便表单发布将匹配新的命名路由。

对于此解决方案，做出了一些假设:

• 已为应用程序启用 jQuery
• onUserSearchReady 方法(或等效方法)尚不存在

考虑到这些假设，您可以将其添加到 app/assets/javascripts/user.js 文件中:

function onUserSearchReady() {
    $.submit(function(event) {
        var form = $("form");
        var action = form.attr("action");
        var search_terms = form.find("#q").val().trim();

        if (search_terms.length > 0) {
            var new_action = action.replace(/query/, encodeURIComponent(search_terms));

            form.attr("action", new_action);
        } else {
            event.preventDefault();
        }
    });
};

然后，在搜索 View 中，将其添加到 View 源的底部:

<script>
jQuery(document).ready(onUserSearchReady);
// Also register appropriate TurboLinks ready callbacks, if using TurboLinks...
// jQuery(document).on('page:load', onUserSearchReady);
// jQuery(document).on('page:restore', onUserSearchReady);
</script>

现在，当用户在搜索词字段 (#q) 中输入 something 时，查询将如下所示:

GET /admin/users/search/something

这样就可以解决这个问题了。