Apply Autocomplete text during search in Ruby on Rails

JS for Search Button

$(document).on('keyup','#auto_search', function() {
  submit_auto_form();
});

$(document).on('click','.ui-autocomplete', function() {
  submit_auto_form();
});

function submit_auto_form() {
  var search_keyword = $("#auto_search").val();  
  var search_keyword_trim = search_keyword.trim();

  if (search_keyword_trim.length == 0 || search_keyword_trim.length > 3 ){
    $("#search_form").submit();
  }
  else {
    return;
  }
}


Controller Action

class TimesheetFeaturesController < BaseController 

  before_filter :fetch_all_timesheets 
  before_filter :find_timesheet, only: [:download_single_csv, :copy, :email] 

  def all_timesheets 
    if params[:term].nil? 
      @timesheets = @timesheets.order_by_company_name_and_week_ending.

paginate(page: params[:page]).try(:decorate) 
    else 
      @timesheets = @timesheets.search_by_company_name(params[:term]).

order_by_company_name_and_week_ending.paginate(page: params[:page]).try(:decorate)      
    end 
  end
end



all_timesheets.js.erb

$('.timesheets').html("<%= j(render :partial => '/timesheet_features/timesheet') %>"); 
initialize_ajax_pagination();

index.html.erb


<div class="tab orders active"> 
  <div class="table-responsive"> 
    <table class="client-sheet table table-striped"> 
      <thead> 
        <tr> 
          <th tabindex="0" rowspan="1" colspan="1">Sheet # 
          </th> 
          <th tabindex="1" rowspan="1" colspan="1">Week Ending Date 
          </th> 
          <th tabindex="2" rowspan="1" colspan="1">Status 
          </th> 
          <th tabindex="3" rowspan="1" colspan="1">Total Employees 
          </th> 
          <th tabindex="4" rowspan="1" colspan="1"> 
            <% if @timesheets.present? %> 
              <a href="<%= client_csv_org_client_timesheets_path(current_org, @company, format: :csv) %>" 

class="btn btn-primary"> 
                <i class="fa fa-download"></i> All sheets 
              </a> 
            <% end %>  
          </th> 
        </tr> 
      </thead> 
      <tbody> 
        <% if @timesheets.present? %> 
          <% @timesheets.each do |timesheet| %> 
            <tr> 
              <td> 
                <a href="<%= org_client_timesheet_path(current_org, @company, timesheet) %>">#

<%= timesheet.id %></a> 
              </td> 
              <td> 
                <%= month_name_dd_yy_helper(timesheet.end_date_in_zone) %> 
              </td> 
              <td> 
                <span class="label <%= timesheet.submit_by_client? ? 'label-success' : 'label-warning' %>">

<%= timesheet.status? %></span>                
              </td> 
              <td><%= timesheet.total_employees %></td> 
              <td> 
                <a href="<%= org_client_timesheet_path(current_org, @company, timesheet) %>" 

class="view-link btn-sm btn-primary"><i class="fa fa-eye"></i></a> 
                <a href="<%= copy_org_timesheet_feature_path(current_org, timesheet) %>" 

data-method="post" class="btn-sm btn-primary"><i class="fa fa-copy"></i></a> 
                <a href="<%= edit_org_client_timesheet_path(current_org, @company, timesheet) %>

" class="btn-sm btn-primary"><i class="fa fa-pencil-square-o"></i></a> 
                <a href="<%= download_single_csv_org_timesheet_feature_path(current_org, timesheet, format: :csv)%>" 

class="btn-sm btn-primary"><i class="fa fa-download"></i></a> 
                <a href="<%= email_org_timesheet_feature_path(current_org, timesheet) %>" 

class="btn-sm btn-success" data-method="post" data-toggle="collapse" title="Send Email">Send Email</a> 

                <a href="javascript:void(0);" class="btn-sm btn-success" data-toggle="collapse" data-target="#

<%= timesheet.id %>">Link 
                </a> 
                <br/> 
                <div class="collapse table-alert" id="<%= timesheet.id %>"> 
                  <div class="alert alert-success" colspan="5"> 
                    <%= link_to unique_timesheet_url(timesheet.uuid), unique_timesheet_url(timesheet.uuid), target: '_blank' %> 
                  </div> 
                </div> 
              </td> 
            </tr> 
          <% end %> 
        <% else %> 
          <tr class="alert-box">            
            <td colspan="5" class="alert alert-warning alert-no-record"> 
              <strong>Currently</strong> 
              there’s no records to display. 
            </td>            
          </tr> 
        <% end %> 
      </tbody> 
    </table> 
    <div class="page_info"> 
      <%= will_paginate @timesheets, renderer: BootstrapPagination::Rails %> 
    </div> 
  </div>


Model.rb

scope :search_by_company_name, ->(term){ joins(:company).where("lower(companies.name) like ?", '%'+term.downcase+'%') }

Search Button

<%= form_tag all_timesheets_org_timesheet_features_path(current_org), method: 'get', id: "search_form", 

class: "search hidden-xs", remote: true do %> 
        <i class="fa fa-search"></i> 
        <%= autocomplete_field_tag :term, params[:term], autocomplete_company_name_org_client_index_path(current_org), 

id: "auto_search", placeholder: "Search Time Sheets...." %> 
      <% end %>