CODEWITHSUNDEEP
jqueryruby-on-rails-4autocompleterubygems
parameter
parameter

Reputation: 904

rails4-autocomplete not working

Trying to use this gem for auto completion in my rails 4 app. I'm attempting to have my review form autocomplete an artist name when the user types it in (if it already exists in database).

Following the example, in my reviews controller I put

class ReviewsController < ApplicationController
  autocomplete :review, :artist

in application.js:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
//= require turbolinks
//= require bootstrap
//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown
//= require_tree .

In routes:

resources :reviews do
    get :autocomplete_review_artist, :on => :collection
end

and at the top of my review form:

<%= form_for(@review) do |f| %>
<% f.autocomplete_field :artist, autocomplete_review_artist_reviews_path %>

review model:

class Review < ActiveRecord::Base

    validates_presence_of :artist
    validates_presence_of :venue
    validates_presence_of :date

    belongs_to :user
    belongs_to :concert

end

It doesn't work though and when I try to type in an artist name into the form that has already been created, nothing comes up to auto complete it. Any help is appreciated.

I also tried doing it in 2 separate controllers exactly how the example is done. still did not work.

in my artist controller

class ArtistsController < ApplicationController
  before_action :set_artist, only: [:show, :edit, :update, :destroy]

  autocomplete :artist, :name

then in routes

resources :reviews do
    get :autocomplete_artist_name, :on => :collection
  end

and review form

<%= form_for(@review) do |f| %>
  <% f.autocomplete_field :artist, autocomplete_artist_name_reviews_path %>

Upvotes: 2

Views: 1949

Answers (2)

Babar
Babar

Reputation: 1202

Created a artist.js.erb in assets/javascripts
content is:
$(function() { var artists = <%Artist.All.collect{|artist| artist.name}%> $( "#artistReview" ).autocomplete({ source: artists }); });
Included that in the view. Using include_javascript_tag
gave the field on which autocomplete was required id: 'artistReview'

required jquery-ui , //code.jquery.com/jquery-1.10.2.js and //code.jquery.com/ui/1.10.4/jquery-ui.js in application.js respectively. and that solved the issue, extensive styling has to be done though

Upvotes: 0

Hamdan
Hamdan

Reputation: 193

I think youll get a better result by doing it in a JS array improving the responsive. To do this, you need to render a variable on your controller with .as_json method.

So, in controller(arguments are illustrative):

@autocompleteArr = Object.pluck(:property).as_json

in view:

<%= f.text_field :somefield %>

in JS(you cant put it on your application file or even in your html):

$('#somefield').autocomplete({source: '<%=raw  @autocompleteArr %>'});

You see, even easier and yet preventing ajax loading time that could make your use experience worse in this case.

Hope it helps.

Upvotes: 1

Related Questions