Requirements: Get coffee-script installed (refer above)
Ref: http://babinho.net/2011/05/autocomplete-fields-in-rails-3-1-with-jquery-ui/
To use this I had to download jquery-ui (http://jqueryui.com/download) and select Autocomplete
Start a new project
$ rails new autocomplete $ cd autocomplete
Create some models
$ rails g scaffold user name:string email:string $ rails g scaffold post title:string body:text user_id:integer $ rake db:create $ rake db:migrate
Make a few users in db/seeds.rb for the autocomplete example
User.create(:name => "Michael Pope") User.create(:name => "John Pope") User.create(:name => "John Smith")
Run seed
$ rake db:seed
Add jquery-ui to application.js (Note: It’s now part of the pipeline)
//= require jquery //= require jquery-ui //= require jquery_ujs //= require_tree .
Unzip jquery and copy your theme across.
$ cp -Rv jquery-ui/css/ui-lightness/* <my app>/app/assets/stylsheets $ cd <my app>/app/assets/stylsheets $ ln -s jquery-ui-1.8.16.custom.css jquery-ui.css
Edit application.css
*= require_self *= require jquery-ui *= require_tree .
Create autocomplete controller
$ rails g controller autocomplete
Add the following to autocomplete_controller.rb
class AutocompleteController < ApplicationController
def users
if params[:term]
like = "%".concat(params[:term].concat("%"))
users = User.where("name like ?", like)
else
users = User.all
end
list = users.map {|u| Hash[id: u.id, label: u.name, name: u.name]}
render json: list
end
end
Setup some links in posts_controller.rb
class PostsController < InheritedResources::Base
def user_name=(name)
user= User.find_by_name(name)
if user
self.user_id = user.id
else
errors[:user_name] << "Invalid name entered"
end
end
def user_name
User.find(user_id).name if user_id
end
end
Edit post.rb to link post to users
class Post < ActiveRecord::Base
belongs_to :user
attr_accessor :user_name
def user_name
user.name if user_id
end
end
Now add to the posts form (app/views/posts/_form.html.haml)
.field = f.label :user_name = f.text_field :user_name = f.hidden_field :user_id
autocomplete.js.coffee
$(document).ready ->
$('#post_user_name').autocomplete
source: "/autocomplete/users"
select: (event,ui) -> $("#post_user_id").val(ui.item.id)
Add route to routes.rb
match '/autocomplete/users' => "autocomplete#users"
Start your server
$ rails s
Go to http://localhost:3000/posts/new
Start typing ‘Michael’ into the User name field
@betromatic, looks like that selector is not returning correctly or you do not have autocomplete bound to that element. You could always log the element in the console to be sure its there, and double check you did not forget to include JQuery UI. It's the line //= require jquery-ui.