This app is meant to show you how to use the rails3-jquery-autocomplete gem.
Ruby JavaScript
Switch branches/tags
Nothing to show
Clone or download


rails3-jquery-autocomplete Example Application

This app is meant to show you how to use the rails3-jquery-autocomplete gem.

You can find the same example using MongoID here.

The Application, step by step

Create the app

Use the rails command to create a new application

rails new rails3-jquery-autocomplete -J

The -J option is used to skip prototype, at this point I assume you won't need it.

Gem requirements

The first thing to do is, add the following line to the Gemfile:

gem 'rails', '3.0.0'
gem 'rails3-jquery-autocomplete'
gem 'nifty-generators'

This will include the rails3-jquery-autocomplete and Ryan Bates' nifty-generators gem as dependencies for the application.

We will use nifty-generators to speed things up a bit.

Now, make sure you install the required gems by running:

bundle install

Run the nifty-generators layout command to install some default files:

rails g nifty:layout

Run the generator

Run the generator to install the required files:

rails g autocomplete:install

Javascript files

Go to and create a custom build for jQuery-UI. Obviously, make sure you select the Autocomplete widget.

Click on download and extract all the files in the zip file you just downloaded.

Copy the files on the js folder to the public/javascripts folder on your app.

Copy the files on the css folder to the public/stylesheets folder on your app. Note that these files may be one level down from the css folder, in a folder called "ui-lightness".

Go to and copy rails.js to the public/javascripts folder on your app.

Include the files on your layout

Open app/views/layouts/application.html.erb and put the following lines on the

section (be sure to examine your public/stylesheets and public/javascripts folders and use the correct version numbers for jQuery and jQuery-UI, which may be different from this example) :
  <%= 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' %>

Create a model

Let's create a model named Brand that will have a name attribute:

rails g model Brand name:string

Create your database by running:

rake db:create
rake db:migrate

Now, to make sure we have something to test the app, lets add something to the seed file. Open db/seeds.rb and add the following lines:

Brand.create(:name => 'Alpha')
Brand.create(:name => 'Beta')
Brand.create(:name => 'Gama')

Then, run rake db:seed to populate the database with the values on the seeds file.

Create a Controller

Create a controller called welcome with a show action:

rails g controller welcome show

Edit the config/routes.rb file, add the following two lines:

get "welcome/show"
root :to => "welcome#show"

Delete the public/index.html file.

Run the server,

rails s

Go to on your browser and make sure everything is running just fine.

The magic

Add this line at the very top of the app/controllers/welcome_controller.rb file:

autocomplete :brand, :name

And add to config/routes.rb:

get 'welcome/autocomplete_brand_name'

Now, run rake routes and you should have something like:

                   welcome_show GET /welcome/show                    {:controller=>"welcome", :action=>"show"}
welcome_autocomplete_brand_name GET /welcome/autocomplete_brand_name {:controller=>"welcome", :action=>"autocomplete_brand_name"}
                           root     /                                {:controller=>"welcome", :action=>"show"}

The view

Replace app/views/welcome/show.html.erb with the following code:

<%= form_tag do %>
  <%=text_field_tag 'name', '', :autocomplete => welcome_autocomplete_brand_name_path %>
<% end %>

Notice how I used the autocomplete action's _path helper as the value for :autocomplete?

Run your server, go to and try typing 'Al' on the text field.

If you can see the Autocomplete widget. You're done.

Testing with Cucumber

You can find examples on how to test the autocomplete feature using cucumber in the features folder.

You can run the tests with the cucumber command.

About the Author

Crowd Interactive is an American web design and development company that happens to work in Colima, Mexico. We specialize in building and growing online retail stores. We don’t work with everyone – just companies we believe in. Call us today to see if there’s a fit. Find more info here!