Showing posts with label Ruby on Rails auto complete. Show all posts

AutoCompleter example in Ruby on rails

by Noman Muhammad

in Ruby on Rails adding auto complete textbox is pretty simple. here is a simple example of it ...
in this example there will be 2 tables in DB. Customers table & Messages table. In the Customers table customer name and address will be saved. In the Messages table customer name and message to that customer will be saved. In the message form if we start typing the customer name, the name of the customers will be shown and we can select a particular customer name. that all. so lets start ...

Here i use Netbeans 6.0 as IDE

1. first create a new rails project.
2. run Rake Task to create the db
3. generate scaffold with this parameter in the [Model Name:] text field

Customer name:string address:text
4. run Migrate Database to create the customers table
5. now run this project
6. in the browser go to http://localhost:3000/customers and add some customers name and address
7. now generate another scaffold with this parameter in the [Model Name:] text field
Message to:string body:text
8. run Migrate Database to create the messages table
9. now the plugin Auto_complete have to be downloaded
10. download auto_complete plugins from github
11. unzip the downloaded zip folder and rename the folder 'auto_complete'
11. store 'auto_complete' folder in the "\vendor\plugins\" folder. [i.e. \vendor\plugins\auto_complete]
12. now, open the file 'messages.html.erb' from \app\views\layouts and add the following line before tag
<%= javascript_include_tag :defaults %>
13. now, open the file 'new.html.erb' from app\views\messages and change this line
<%= f.text_field :to %>
to
<%= text_field_with_auto_complete 'message', 'to',{}, :skip_style => false  %>
14. open MessageController and add this line
skip_before_filter :verify_authenticity_token, :only => [:auto_complete_for_message_to]
after this
class MessagesController < ApplicationController

15. add this new function in this controller:
def auto_complete_for_message_to()
user_name = params[:message][:to]
@customers = Customer.find(:all , :conditions=>"name like '%"+user_name.downcase+"%'")
render :partial => 'username'
end

16. now create a new partial file in app\views\messages and name it _username.html.erb
17. paste this code in this partial file
<ul class="allusers"><% for customer in @customers do %><li class="thisuser"><div class="useremail"><%=h customer.name %></div><div class="username"><span class="informal"><%=h customer.address %></span></div></li><% end %></ul>

18. now restart server and in the browser go to http://localhost:3000/messages and now in the to field start typing u'll see some name coming from DB.
19. so its woking !!!!!!!!!!!!!!!!!!!!!!!!!!!