Format query paramethers in a pretty way

Question

I have a search controller in my Rails project, which responds to a form in my header. Now, everything works nicely but when I search "something", I get admin/users/search?q=something in my URL. I am trying to make this a more user friendly URL, such as admin/users/search/something .

I tried changing my routes from get 'search' => 'search#index' to get 'search/:q' => 'search#index', :as =>"search . However, on my form it asks me to explicitly put the parameter so something like form_tag admin_search_path, :enforce_utf8 => false, :method => :GET does not work because I need parenthesis in front of my path admin_search_path(something) .

How can I implement "nice" search URLs for my application?

Answer 1

You can use the named route that you had tried, with the :q parameter, and from your form, we'll dynamically replace the route parameter with the search terms that have been entered.

First, create your form like you normally would, except specifying "query" as the search parameter. Also, make sure that the search terms field ( #q ) does not have a name attribute; form elements with no name attribute do not get submitted to the server:

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

One the user has entered the search term and clicked submit (or pressed the enter key), we'll replace the query portion of the route with the actual search terms, so that the form post will match the new named route.

For this solution, there are some assumptions made:

• jQuery is enabled for the application
• that the onUserSearchReady method (or equivalent) does not exist yet

Given those assumptions, you can add this to the app/assets/javascripts/user.js file:

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();
        }
    });
};

And then, in the search view, add this to the bottom of the view source:

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

Now, when the user enters something in the search terms field ( #q ), the query will look like this:

GET /admin/users/search/something

And that should just about take care of it.