#102 Auto-Complete Association (revised)

Wow. That's nice and clean. In this case though, it's a fairly simple example. Recently, I needed a hidden field with the id of the record, and a visible field with the name of the record (for a accepts_nested_attributes_for population). Custom JS and HTML I found was a bit more flexible.

I made a 'search' action on the Users controller, which implements the search and rendering of HTML, rather than JSON. I prefer this way because:

• It doesn't add complexity to the index method (contained functionality, esp since index uses a simple User.all, while search needs something more complex (for fulltext or sphinx or other things like that)
• Rendering a properly classed HTML ul element and inserting that into the page I find gives much better style control. You can add things like image into it as well.

I prefer rendering HTML from an existing partial, than having to recreate that partial in Javascript and render it that way.

Thank you for your casts, always appreciated!
Any advice about implementing it with a category description and category photo? Any comment is welcome!

Tried this with locations for a new event. It was working fine then I deleted a location and it keeps trying to download a json file instead of displaying the index. Any ideas?

Log:
Started GET "/locations" for 192.168.. at 2011-11-15 14:20:10 -0500
Processing by LocationsController#index as HTML
Location Load (3.2ms) SELECT "locations".* FROM "locations"
Location Load (2.0ms) SELECT "locations".* FROM "locations" WHERE (name like '%%') ORDER BY name
Completed 200 OK in 89ms (Views: 7.8ms | ActiveRecord: 8.4ms)

Thank!

See also :
http://harvesthq.github.com/chosen/
http://github.com/christianblais/searchify

good job!

i have one question.. method 'data:', is only in rails 3.1 ?

How would you incorporate this with a many to many association where you have a product and category and an association model with product_id and category_id?

I keep getting:
Uncaught TypeError: Object # has no method 'autocomplete'

I've included jQuery UI in application.js:
//= require jquery-ui

... and my coffeescript:
jQuery ->
$('#location').autocomplete
source: ["foo", "food", "four"]

What am I missing!?

How would you do autocomplete and adding new items to the list without an association? like an open text field to add anything?

do you know if this works in rails 3.0.3?

How to implement with more than one word? I have problems when i use to autocomplete for example "java javascript" and load a table below in ajax. The value is "java" and not "java javascript".

I read that is a limitation of the plugin and I need other one, like bassistance. Anyone knows how to replace in rails with bassistance?

what if you have validations on the associated model?

in the model i have

  def spot_name=(name)
    self.spot = Spot.find_or_create_by_name(name, :address => name) if name.present?
  end

and a geocoder like in episode #273 attached to spot.
when i have a spot_name that i cannot geocode i want the form to display the error but how do i do that?

Does anyone have any hints of how they could implement this on a has_many to has_many relationship, using a third modal to join them?

The creation of the Category I need to pass the establishment_id how can I do this? being that he is not an attribute attr_accessible

class Product < ActiveRecord::Base

  validates :name, :description, :price, :category_name, presence: true
  validates :category, associated: true

  belongs_to :establishment
  has_one :item_carte
  has_one :category, through: :item_carte

  attr_accessible :name, :description, :price, :category_name
  
  def category_name
    category.try(:name)
  end
  
  def category_name=(name)
    self.category = Category.find_or_create_by_name(name) if name.present?
  end
end

class Category < ActiveRecord::Base

  validates :name, presence: true
  validates :name, uniqueness: true
  validates :products, associated: true

  belongs_to :establishment
  has_many :item_cartes
  has_many :products, through: :item_cartes

  attr_accessible :name
end

Hey Ryan, how could we validate these virtual attributes? I can validate without any problems the id that these _name setters refer to, but I can't output the feedback on the form. How could I do that? Thank you.

I think you need "%" like this if you try the last tutorial .

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

Great video. I got a subscription just to see it.

One big question: How can I pass extraParams? I need to pass another id with the term and can't seem to get it to work.

Great screencast. It helped me to DRY this problem a little bit up for SIMPLE model constellations as mentioned in this screencast.

Enclosed you'll just find an untested refactoring version but an older similar refactoring version has been tested successfully ;-)

So I would generally transform all tags with a data-autocomplete-source attribute into an autocomplete input.

application.js.coffee

jQuery ->
  $('[data-autocomplete-source*="auto"]').each (k, v) ->
    $(v).autocomplete
      source: $(v).attr('data-autocomplete-source')

This autocomplete data source can be put in a separate generic autocomplete action instead of the index action and be introduced to the client through a view helper:

application_helper.erb

module ApplicationHelper
  def autocomplete_input(f, field)
    f.input "#{field}_name", data: {autocomplete_source: eval("autocomplete_#{field.to_s.tableize}_path")}
  end
end

_form.html.erb

<%= autocomplete_input(f, :category) %>

routes.rb

resources :categories do
  collection do 
    get :autocomplete
  end
end

This module about a generic autocomplete action can be included at the top of every resource controller based on a ActiveRecord::Base child class (you have to set the autocomplete route for each controller as shown above):

module AutocompleteAction
  extend ActiveSupport::Concern
  
  def autocomplete
    render json: (
      request.path.split('/')[1, 2].first.classify.constantize.
      select(:name).order(:name).where("name LIKE ?", "%#{params[:term]}%").
      map(&:name)
    )
  end
end

The association setters could be generated dynamically through meta programming.

So the following code generates special setter methods for all belongs_to and polymorphic associations when included in an ActiveRecord::Base child class.

module AssociationSetter
  extend ActiveSupport::Concern

  included do              
    columns.map(&:name).select{|c| c.match('_id')}.each do |column|
      association = column.split('_id').first.classify
      
      define_method "#{association.underscore}_name" do
        self.send(association.underscore).try(:name)
      end
      
      accessible_attributes << "#{association.underscore}_name"
      
      define_method "#{association.underscore}_name=" do |name|
        return if name.blank?
        
        association_type = association
        
        if self.class.columns.map(&:name).include?("#{association.underscore}_type")
          association_type = self.send("#{association.underscore}_type")
        end
        
        self.send("#{association.underscore}=", association_type.constantize.find_or_initialize_by_name(name))
      end
    end
  end
end

P.S.: Maybe it turns out to be worth to extract in a gem some day ;-)

How would one test this with rspec & capybara? I haven't been able to select an option from the autocomplete list with capybara. Anyone been successful with this?

If you don't need to be able to add new records to the referenced model implicitly then there's a nicer, pure jQuery option that works solely on IDs and does not require you to add accessors to your models: https://gist.github.com/3842296

We are trying to make the sample code working on post and user (instead of product and category) with user has_many posts and a post belongs_to a user. However there is a network error below. (even when source: was changed to source: ["choice1", "choice2"] and data: (autocomplete_search :@users.map(&:name)} in view file

"NetworkError: 404 Not Found - http://localhost:3000/ajax/users?term=cha"

Any idea about fixing the error?

Can someone explain how to get this working with mongoid?

many many thanks

Hi all. I encountered an issue where the CSS provided in this episode wasn't highlighting the selected search term.

I dug around and found out that for some reason JQueryUI changed the class of "active" search items from a.ui-state-active to a.ui-state-focus. If you make that change to Ryan's CSS, the example works again.

at 8:07.. How would I return more than just the name of the object?

I need to supply several other attributes as well although I'm having a hard time finding a simple explanation for using .map to return other attributes as well.

I have the following setup

jQuery ->
  $('#release_anime_title').autocomplete
    source: ['foo', 'food', 'four']

<%= f.text_field :anime_title %>

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

Rails 3.2.12

when I type 'f', nothing gets populated. Any ideas?
I have javascript enabled on my browser.

Everything works up until I switch the source to anything non-local (source: ['foo', 'food', 'four'] works fine).

This is the error I'm seeing in the console while typing for non-local data:

Uncaught TypeError: Property 'source' of object [object Object] is not a function

Any suggestions? My code is almost identical to the screencast.

Got it working, great video! but how can I get the id of the record in a hidden field?

I have one question. if I want to have the autocomplete-source to return more than one attribute. how do i handle that?

Just a heads up for those in Rails 4, I got stuck because of 1 thing:

the "find_or_create_by" method has been deprecated in rails 4

so instead of this

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

try this

def category_name=(name)
    self.category = Category.where(:name => name).first_or_create!
  end
end

source: http://stackoverflow.com/a/3046645/4195073

Hope that helps someone!

This episode has been updated to Rails 5 as a blog post Auto-Complete Association in Rails 5

I have a problem in my project. I use this:
<%= text_field_tag :tag, nil, {"data-autocomplete-source": Tag.order(:name).map(&:name)} %>
and that outputs:

I need data-autocomplete-source to be array because of autocomplete. In rails console, Tag.order(:name).map(&:name) returns array. Thanks