Random Rantings and Code

This is something I developed for Train, The PM system requires that the user type in the username of the intended recipient , this is a perfect place to use Auto Completetion.

After a bit of searching i discovered that you can do auto completetion in rails, but it uses prototype, which aside from being obtrusive would get in the way of all the jQuery stuff i have in Train already.

So i decided to write something in jQuery myself. When you think about it using jQuery there are only a few things that you need:

• A text field that you want to search with
• A div to display results in
• An Ajax request that gets triggered on text entry
• An Ajax response with the results in

So lets first create a javascript document that will serve as our Auto Completetor. The code on this page should look something like this:

$(document).ready(function(){
$('#message_receiver_id').keyup(function(){
		if($(this).val()==""){
			$('#auto_complete_results').html("")
		}else{
			$.getScript('/users?search=' + $(this).val());
		}
	});
	$('#auto_complete_link').live("click",function(){
		$('#message_receiver_id').val($(this).html());
		$('#auto_complete_results').html("")
		return false
	});
});

So what does that do?

$(‘#message_receiver_id’).keyup(function(){ This binds the following code to the event to keyup event of the “#message_receiver_id” input box.

The if statement hides the box if the user deletes all content in the text field, otherwise you would get a list of 10 users.

$.getScript(‘/users?search=’ + $(this).val()); calls index.js.erb from the users index action and passes the value of the text area as the search parameter.

The next bit disables the links and makes it so that when you click them it changes the content in the text field.

You then need to add a link to the javascript file on the page you require it on using the javascript_include_tag helper method in your head tags.

Now this is where things get a little complicated, You want to perform a search using the auto completion and that needs to go on through the index action, but in most cases you will probably already/want to produce a list through HTML. So the Question becomes how do you make the output different depending on what the format of the request was. Well i get around this by only using the search parameter for the Ajax request. Rails will already use index.js.erb when a javascript request is made.

This means that you could modify the controller to look like this:

def index
		@users = User.paginate(:page =>; params[:page], :per_page => 15,  rder => "username ASC") unless params[:search]
		@autocompletes = User.find(:all, :conditions => ['username LIKE ?', "%#{params[:search]}%"], :limit => 10) if params[:search]
	end

You then need to create 2 views in the intended controller you are searching, index.js.erb and _results.html.erb

index.js.erb needs to look like this:

$("#auto_complete_results").html("");

This code changes the content of the results div tag to the contents of _results.html.erb, escape_javascript just makes sure that the content wont harm your javascript.

_results.html.erb needs to look like this:

You just need to add a div tag under the text field with the id of auto_complete_results.

The results should look something like this:

Auto Completetion Demo

One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Continuing the Discussion

1. Ольга

   СПС.…

   Я тут…

   May 30, 20102:21 pm