2

I am following tutorials here https://github.com/crowdint/rails3-jquery-autocomplete-app about rails3 jquery autocomplete. Everything works perfectly, except for auto-complete!

Below is the procedure I used.

  1. In gemfile, I added "gem ‘rails3-jquery-autocomplete’"
  2. I generated autocomplete file using "rails g autocomplete:install"
  3. I downloaded Javascript files
  4. I included the Javascript files in the layout by <%= javascript_include_tag 'jquery-1.4.2.min.js', 'jquery-ui-1.8.4.custom.min.js', 'autocomplete-rails.js', 'rails.js' %> <%= stylesheet_link_tag 'jquery-ui-1.8.4.custom.css' %>
  5. Created a Brand model with name as string by "rails g model Brand name:string", and added several items into the Brand through Brand.create(:name => 'Alpha').
  6. Created a controller "rails g controller welcome show", and edited routes.rb by get "welcome/show" root :to => "welcome#show"
  7. Added "autocomplete :brand, :name" in app/controllers/welcome_controller.rb
  8. Added "get 'welcome/autocomplete_brand_name'" in config/routes.rb
  9. In app/views/welcome/show.html.erb: <%= form_tag do %> <%=autocomplete_field_tag 'name', '', welcome_autocomplete_brand_name_path %> <% end %>

Basically I followed every step in the tutorial except the last one(I found it should be autocomplete_field_tag instead of text_field_tag 'name). However, autocomplete does not work. I am new to Rails and struggled on this for days. Anyone could throw some light on this issue?

Thanks!

2 Answers 2

6

I have been suffering exactly the same problem (Rails 3.2.1 and using the demo app tutorial). I also have more information about what's going on, which has led me to a solution. Hope it works for you!

My console log was showing the following error:

Started GET "/%7B:autocomplete=%3E%22/welcome/autocomplete_brand_name%22%7D?term=Al" for 127.0.0.1 at 2012-09-04 21:38:14 +1000
ActionController::RoutingError (No route matches [GET] "/%7B:autocomplete=%3E%22/welcome/autocomplete_brand_name%22%7D"):

For the ASCII-challenged (ie me) the codes are

%7B {  
%3E >  
%22 "  
%7D }  

So the URI it's trying to GET is

/{:autocomplete=>"/welcome/autocomplete_brand_name"}?term=Al

which the router is not happy about.

When you look at the pages HTML source as rendered, it looks like:

<input data-autocomplete="{:autocomplete=&gt;&quot;/welcome/autocomplete_brand_name&quot;}" id="name" name="name" type="text" value="" />

which shows that the arguments from the .erb file are leaking through. I modified the contents of my form to have:

<%= form_tag do %>
  <%= autocomplete_field_tag 'name', '', welcome_autocomplete_brand_name_path %>
<% end %>

IE without the :autocomplete => as suggested in the tutorial, and now it is working for me. Your sample code shows you already have this, so you may be suffering from the following issues that I also changed:

Before I managed to focus on the previous points, my console log was issuing all sorts of complaints about not finding the .css and .js files. I've ended up shifting all the files from public/javascripts and public/stylesheets to the new app/assets/javascripts and app/assets/stylesheets, and then modifying the contents of the main application.js and application.css files, and also the main layout:

app/assets/stylesheets/application.css:

*= require_self
*= require jquery-ui-1.8.23.custom
*= require_tree .

app/assets/javascripts/application.js:

//= require jquery-1.8.0.min
//= require jquery-ui-1.8.23.custom.min
//= require autocomplete-rails
//= require rails
//= require_tree .

If the exact version numbers of your .js and .css are different, don't forget to change the numbers in my example.

The final change was to remove the suggested additions to the application.html.erb and rely on the asset pipeline (ie all those requires above). The only items I have for .css and .js files in the main layout are

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

Now I've got the basics working, I can get back to trying to use it with HAML, Formtastic and the nested_forms gem! Hope that doesn't take another day out of my life.

Cheers

PS - the tutorial also says to put

gem 'rails', '3.0.0'

but since you're using Rails 3.2.1, leave it as the original:

gem 'rails', '3.2.1'

Finally, the nifty-scaffold generator is not quite putting things in the correct place for the 3.2.1 standards; shift it's files from public/javascripts and public/stylesheets into the app/assets subdirectories. You'll have to edit and merge nifty .css into the default one you'll find in app/assets/stylesheets.

1
  • Brilliant. The information about the form_tag syntax should actually be documented on the github repo
    – Jerome
    Oct 11, 2014 at 8:42
1

I had a similar experience, using Rails 3.2.8 on OSX and 3.2.9 on Windows and following the tutorial for the autocomplete app here:

https://github.com/crowdint/rails3-jquery-autocomplete-app

If I downloaded the sample application from github, it compiled and worked fine. If I followed the steps I could not get things to work. The sample app has a bunch of othere stuff in it, so I wanted the leanest way to interact with this. After digging, I found the following changes were necessary in addition to following the steps to get things working.

  • Tutorial asks you to copy jquery and other js files into public/javascript. Don't. Copy them under app/assets/javascript and app/assets/stylesheets. This version of Rails is looking for them there, you will fail otherwise.

  • Remove the

<%= javascript_include_tag :defaults %>

line from your application.html.erb file. It is not there and will cause an error during load.

  • The rails version is 3.2.9 or 3.2.8, make sure you are explicitly calling it out.
gem 'rails', '3.2.9'
  • Make sure you are explicitly versioning the rails3-jquery-autocomplete to version 0.6.0 as below.
source 'https://rubygems.org'

gem 'rails', '3.2.9'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'
gem 'rails3-jquery-autocomplete', '0.6.0'
gem 'nifty-generators'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

I didn't have to change the application.js file at all.

//
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
//

application.html.erb file head section looks like this with most recent jquery files I downloaded from jqueryui.com

  <head>
    <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
    <%= stylesheet_link_tag "application" %>

<%= javascript_include_tag 'jquery-1.8.2.js', 'jquery-ui-1.9.1.custom.min.js', 'autocomplete-rails.js', 'rails.js' %>
<%= stylesheet_link_tag 'jquery-ui-1.9.1.custom.css' %>
    <%= csrf_meta_tag %>
    <%= yield(:head) %>
  </head>

A minor thing I ran into also was the sqlite3 not loading on 64-bit Windows. The solution for that is to copy the sqlite3.dll into windows/system directory. Not windows or windows/system32, or not anywhere on the path, not the ruby/bin.

Lastly, in the earlier version of the rails3-jquery-autocomplete, text_field_tag is supported. The sample on github uses 0.6.0 as the version of this gem and uses text_field_tag. For more recent drops like 1.0.10, autocomplete_field_tag is supported. They are not the same, and although the input field is rendered the same way, autocomplete does not work when the wrong tag is used.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.