Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

branch: master
README.markdown

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 http://jqueryui.com/download 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 http://github.com/rails/jquery-ujs 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) :
<head>
  <%= 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' %>
</head>

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 http://127.0.0.1:3000 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:

<h1>Welcome!</h1>
<%= 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 http://127.0.0.1:3000 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!

Something went wrong with that request. Please try again.