Rails 4 link to search with elasticsearch

Question

I am using elasticsearch with searchkick on my rails 4 app.

I just implemented a 'did you mean' feature where it will recommend the correct spelling to users when the query is misspelled.

What is the best way to turn the suggested word into a clickable link that will then search for that instead? Having trouble finding any documentation on doing so.

Here is the code in my view which displays 'did you mean' suggestions:

Did you mean: <strong><%= @articles.try(:suggestions).join' ' %></strong>

and here is my search method in the articles_controller:

@articles = Article.search(params[:q], misspellings: {edit_distance: 2}, suggest: true, fields: ["specific^10", "title", "aka", "category", "tags_name", "nutritiontable"], boost_where: {specific: :exact}, page: params[:page], per_page: 12)

Here is the form I use to search my app:

<div class="searchbar" id="sea">
    <%= form_tag articles_path, method: :get do %>
        <p>
            <%= text_field_tag :q, params[:q], id:"complete", name:"q", style:"width:550px; height:34px;", :autofocus => true, class: "form-control", placeholder:"Search... " %><br>
            <%= submit_tag "Let's Find Out!", :name => nil, class: "btn btn-default btn-lg", style: "margin-right: 10px;" %>
            <%= link_to "Most Popular", articles_path(:most_popular => true), class:"btn btn-default btn-lg" %>
        </p>
    <% end %>
</div>

Answer 1

I am posting some code which may help you, you will need to fix any issues in it but you will get an idea what needs to be done:

<div class="searchbar" id="sea">
    <%= form_tag articles_path, method: :get, id: 'search_form' do %>
        <p>
            <%= text_field_tag :q, params[:q], id:"complete", name:"q", style:"width:550px; height:34px;", :autofocus => true, class: "form-control", placeholder:"Search... " %><br>
            <%= submit_tag "Let's Find Out!", :name => nil, class: "btn btn-default btn-lg", style: "margin-right: 10px;" %>
            <%= link_to "Most Popular", articles_path(:most_popular => true), class:"btn btn-default btn-lg" %>
        </p>
    <% end %>
</div>

I just added a id to the form.

Did you mean: <a id='suggested_word'><strong><%= @articles.try(:suggestions).join' ' %></strong></a>

Then in jquery:

$("#suggested_word").click(function(){
  var word = $(this).text();
  $("input#complete").val(word);
  $("#search_form").submit();
});

This is just a rough code would need much refactoring. What I have done is when any one clicks on the suggestion then the suggested word should be entered in the textbox and that form should be submitted using that word. So it would display the new results with that word.

Now suppose @articles.try(:suggestions) returns multiple words then you need to loop them and add anchor tag to each of them.

Hope this helps.