Before you start
Make sure your project is using jQuery-ui with the autocomplete widget before you continue.
You can find more info about that here:
I'd encourage you to understand how to use those 3 amazing tools before attempting to use this gem.
Include the gem on your Gemfile
gem 'rails3-jquery-autocomplete', '>= 0.2.0'
Run the generator
rails generate autocomplete
And include autocomplete-rails.js on your layouts
Assuming you have a Brand model:
class Brand < ActiveRecord::Base end create_table :brand do |t| t.column :name, :string end
To set up the required action on your controller, all you have to do is call it with the class name and the method as in the following example:
class ProductsController < Admin::BaseController autocomplete :brand, :name end
This will create an action autocomplete_brand_name on your controller, don't forget to add it on your routes file
resources :products do get :autocomplete_brand_name, :on => :collection end
By default, the search starts from the beginning of the string you're searching for. If you want to do a full search, set the full parameter to true.
class ProductsController < Admin::BaseController autocomplete :brand, :name, :full => true end
:full => true
The following terms would match the query 'un':
:full => false (default behavior)
Only the following terms mould match the query 'un':
On your view, all you have to do is include the attribute autocomplete on the text field using the url to the autocomplete action as the value. form_for @product do |f| f.text_field :brand_name, :autocomplete => autocomplete_brand_name_products_path end
This will generate an HTML tag that looks like:
<input type="text" autocomplete="products/autocomplete_brand_name">
Now your autocomplete JS code is unobtrusive, Rails 3 style.
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!