Facebook Friend Selector in Ruby on Rails (ROR) using jquery autocomplete plugin

I am using Rails 3 and Facebooker2 with Mogli. So you should have those if you are making a facebook project. Also this is a iFrame app. Since FBML apps so soon be deprecated.

First of all you should have a Controller with a action that gets all your friends with there names and id, because we will need those for our custom Friend Selector. I had to make it because Facebook's Friend selector wasn't behaving well, some time it will show up and most of the times it wont show up. So back to the code .
Here is code snippet that gets you friend list and convert to JSON to be consumed on client side.
I wont discuss how to setup Facebooker2 and Mogli.

@friends = Array.new
current_facebook_user.friends(:id,:name).each do|friend|
@friends << {:name => friend.name, :id => friend.id}
end
@friends = @friends.to_json

So thats it for the Rails 3 code.

Now we need to add references for jquery javascript and css. Here what I added

%script{:src => "http://code.jquery.com/jquery-latest.js", :type => "text/javascript"}
%link{:href => "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css", :rel => "stylesheet", :type => "text/css"}/
%script{:src => "http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js", :type => "text/javascript"}
%script{:src => "http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js", :type => "text/javascript"}
%script{:src => "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js", :type => "text/javascript"}

I am using haml instead of normal html. Haml is more elegant and easy to code.

Ok now to code View for the action.

= form_tag(friend_selector_url(:host => "apps.facebook.com/app-name-at-facebook"), :method => "get", :target => "_top", :autocomplete => "off") do
= hidden_field_tag('friend_sel')
.identify-friend
%p{:style => "float:left;width:180px"} Identify the friend that you are asking about:
= text_field_tag("friend_uid")
= submit_tag('Ask', :name => 'btn')

We use will set the value of 'friend_sel' hidden field equal to friend id ,so that when form is submitted we can get friend id from params at the action of controller,using jquery autocomplete plugin.
Here is the last part of code. The jquery autoplugin.

:javascript
$("#friend_uid").autocomplete(#{@friends}, {
minChars: 0,
width: 310,
matchContains: true,
highlightItem: false,
formatItem: function (row, i, max) {
return row.name ;
},
formatMatch: function(row, i, max) {
return row.name + " " + row.id;
},
formatResult:function (row){
return row.name;
}
}).result(function(e, item) {
$('#friend_sel').val(item.id);
});

@friends is instance variable that we set in controller's action. 'friend_uid' is the id for text field that will be our autocomplete field.

Thats it for autocomplete friend selector.

Thanks