How to add live search to Rails 4.2?

Question

I've been attempting to create a simple search form which responds to AJAX on my Rails 4.2 application. I've attempted every tutorial I could find, but still to no avail.

• http://railscasts.com/episodes/240-search-sort-paginate-with-ajax
• http://aymeric.gaurat.net/2010/how-to-develop-live-search-textbox-in-ruby-on-rails/
• Ruby on Rails Live Search (Filtering),
• https://www.youtube.com/watch?v=EqzwLUni2PM)

This is my search method:

  def self.search(search)
    search ? where('name LIKE ?', "%#{search}%") : all
  end

My index action on the controller:

  # GET /ticket_types
  # GET /ticket_types.json
  def index
    @ticket_types = TicketType.search(params[:search]).order(sort_column + " " + sort_direction).paginate(per_page: 10, page: params[:page])
    respond_to do |format|
      format.html {render 'index'}
      format.json {render json: @ticket_types.map(&:name)}
    end
  end

My filter:

  <form>
    <fieldset>
      <legend>Filter</legend>
        <%= form_tag path, remote: true, method: 'get', id: id do %>
          <%= hidden_field_tag :direction, params[:direction] %>
          <%= hidden_field_tag :sort, params[:sort]%>
          <p>
            <%= text_field_tag :search, params[:search], id: 'filter_search_autocomplete', data: {autocomplete_source: ticket_types_path} %>
            <%= render 'button_submit', name: nil, id:"search_button" %>
          </p>
        <% end %>
      </fieldset>
    </form>

The submit button:

  <%= submit_tag "Search", name: name, class: 'button', id: id, remote: true %>

My ticket_types.coffee

jQuery ->
  $('#filter_search_autocomplete').autocomplete
  source: $('#filter_search_autocomplete').data('autocomplete-source')

And my index partial:

<p id="notice"><%= notice %></p>

<%= render 'registry_filter', path: ticket_types_path, id: "ticket_search_filter" %>
<%= render 'ticket_types' %>
<br>
<section id="content-area"></section>
<div>
  <%= render 'button_link', button_name: "Create", path: new_ticket_type_path, id: 'create' %>
  <%= render 'button_link', button_name: "Back", path: ticket_types_path, id: 'back_button' %>
</div>

Any ideas on how could I have a livesearch box like Facebook? For example, I'd like that each time the user types a letter on the box, it shows about 5 results of registries that contain the given word, and then use this search asset as a partial to be able to use on other models of the application. Thanks in advance!

Answer 1

I have done something along the lines in which are very similar to what you are trying to accomplish.

If you are storing everything in database then one of the things I would do is to convert the data to json in your rails controller.

Once you have your data converted to json simply create the input field in your rails form in which will have the autocomplete functionality.

Down below the you should pass the json object path to your data option.

Example: <%= f.text_field :some_name, data: {autocomplete_source: some_name_path} %>

In your controller you should do something like so. Order and Where could be declared in your model (preferred way) as scopes.

  def index
    @some_name = SomeName.order(:field_name).where("feild_name like ?", "%#{params[:term]}%")

    respond_to do |f|
      f.json { render json: @some_names.map(&:field_name) }
    end
  end

The tool I used after the above was implemented was: autocomplete

Hope the above helps. If not this railscast episode should get you going in the right direction.