CODEWITHSUNDEEP
ruby-on-rails
Rene Chan
Rene Chan

Reputation: 985

Auto-complete suggestion within a simple_form

I am building an application where i try to suggest "Similar topics" in rails, as the user put the title of his/her new story. I have 2 problems: The controller with the custom action does not work at all. it seems that the server simply retrieves the view. Without running any of the code in the action To go around the issue of the controller, i created a service.rb with a function to retrieve the records based on the params[:title], but from here I do NOT know how to make small popup window with suggestions (and weblinks) as the user write the title of the topic. I have done so far :

View

<div class="col-md-12">
<%= simple_form_for @message do |f| %>
  <div style="font-size: xx-small; font-style: italic; color: #44B5EB">
  <%= f.input :title, label: "#{t :Title}", placeholder: "#{t :Search}", id: "title" , data: {behavior: "autocomplete_message"}%>
  <%= f.cktext_area :description, label: "#{t :Message_body}", :input_html => {:rows => 25} %>
  <br> <br>
  <%= f.submit "#{t :Create_story}", class: "btn btn-primary"%>
<% end %>
</div>
</div>


<script>
    $("#title").addEventListener("turbolinks:load", function () {
        $input = $("[data-behavior = 'autocomplete_message']");
        var options = {
            getValue: "name",
            url: function (phrase) {
                return "messages/search.json?title=" + phrase;
            },
            categories: [
                {
                    listLocation: "qandas",
                    header: "<p class='Search_drop_separate'>Q&A </p>",
                }
            ],
            list: {
                onChooseEvent: function(){
                    var url = $input.getSelectedItemData().url;
                    $input.val("");
                    Turbolinks.visit(url)
                }
            }
        };
        $input.easyAutocomplete(options)
    });
</script>

Controller

class StorytController < ApplicationController
  before_action :authenticate_user!

  before_action :find_message, only: [:show, :edit, :update, :destroy]
  respond_to :html, :js  
...

def search

  #@qandasquestions = Qandasquestion.ransack(question_or_answer_cont: params[:q]).result(distinct: true)

  respond_to do |format|
    format.html {
      @qandasquestions = @qandasquestions
      redirect_to stories_search_path
    }
    format.json {
      @qandasquestions = @qandasquestions.limit(5)
    }
  end
end

def full_name
  "#{first_name} #{last_name}"
end

private
def force_json
  request.format = :json
end
end

Search.jason.builder
json.qandas do
  json.array!(@qandasquestions) do |qandasquestion|
    json.name "#{qandasquestion.question}"
    json.url qanda_path(qandasquestion.qanda_id)
  end
end

routes:

  get 'stories/search'

What I am looking to build is actually very similar to what we have on Stackoverflow on the principle. Anybody did something similar and can help me please?

Upvotes: 1

Views: 401

Answers (1)

Andy
Andy

Reputation: 114

I don't mean to sidetrack you but if you have a couple minutes to check this out, have you seen select2? It works nice with Rails and there's also a gem to make it work nice with simple_form

https://github.com/lndl/select2_simple_form

Upvotes: 1

Related Questions