#102 Auto-Complete Association (revised)

Nov 10, 2011 | 9 minutes | Ajax, Forms

A select menu is often used for setting a belongs_to association, but you should also consider using a text field with autocomple. Here I use jQuery UI and show two different solutions: client side and server side.

Click to Play Video ▶

Download:
source codeProject Files in Zip (95.6 KB)
mp4Full Size H.264 Video (16.9 MB)
m4vSmaller H.264 Video (9.6 MB)
webmFull Size VP8 Video (11.9 MB)
ogvFull Size Theora Video (21.5 MB)

Browse Source Code

Resources

          models/product.rb
        
def category_name
  category.try(:name)
end

def category_name=(name)
  self.category = Category.find_or_create_by_name(name) if name.present?
end

          app/assets/javascripts/application.js
        
//= require jquery-ui

          app/assets/javascripts/products.js.coffee
        
jQuery ->
  $('#product_category_name').autocomplete
    source: $('#product_category_name').data('autocomplete-source')

          app/assets/stylesheets/application.css.scss
        
ul.ui-autocomplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  li {
    background-color: #FFF;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 0;
    a {
      color: #000;
      display: block;
      padding: 3px;
    }
    a.ui-state-hover, a.ui-state-active {
      background-color: #FFFCB2;
    }
  }
}

Client Side Solution

          products/_form.html.erb
        
<%= f.text_field :category_name, data: {autocomplete_source: Category.order(:name).map(&:name)} %>

Server Side Solution

          products/_form.html.erb
        
<%= f.text_field :category_name, data: {autocomplete_source: categories_path} %>

          bash
        
rails g controller categories

          config/routes.rb
        
resources :categories

          categories_controller.rb
        
def index
  @categories = Category.order(:name).where("name like ?", "%#{params[:term]}%")
  render json: @categories.map(&:name)
end