One way to work around this is by using JSON and the jQuery AutoComplete plugin.  The AutoComplete component allows you to bind a data object to any input control to allow you to use autoComplete features on it. An example of how to enable this can seen below. 

var data = "".split("John James Tom Cat Luke");

$("#friendSelectionInputBox").autocomplete(data);

If you would like to test out the capabilities of the plugin a little further, why not take a look at the demos page :). You might have already guessed that what we are going to do is bind an array of data we get from the Facebook API directly to the autocomplete component.  The first thing you’ll need to to is populate a PHP array with data from your friend’s list. Once you’re familiar with setting up Facebook API Objects, this is as simple as saying:

$query = "SELECT name, sex, pic_square FROM user  WHERE uid
IN ( SELECT uid2 FROM friend WHERE uid1= '$fb_user') ";
$friends = $facebook->api_client->fql_query($query);

Now that we have an arary of our friend information, the next thing we need to do is convert this to a format the autoComplete plugin can understand – namely JSON. 

$function generate_friend_array($facebook, $friends) {

	if (count($friends) > 0 ) {
	$list_array = $facebook->api_client->users_getInfo($friends,
array('uid', 'last_name','first_name')); 

	// array sorting (friend list alphabetically)
	usort($list_array, 'cmpi');

	$return = "var friend_array = []; ";

	foreach ($list_array as $list_array_line) {
	$uid = $list_array_line['uid'];
	// insert slashes to escape potential ' in names
	$first_name = addslashes($list_array_line['first_name']);
	$last_name = addslashes($list_array_line['last_name']);
	$name = $first_name ." ". $last_name;
	$return .= "

		friend_array.push(['".$uid."', '".$name."']);

	";	

	}

	return $return;
	} else {
	return "var friend_array = 'none'";
	}
}

The array returned by this function should be valid JSON. For the purposes of this demo our array will only consist of your friend’s name and their UID. The last thing we need to do is adjust our autoComplete component to understand the row format being output by the function.

$("#friendSelectionInboxBox").autoComplete(emails, {
           minChars:0,
           width:310,
           matchContains:true,
           autoFill: false,
           formatItem: function (row, i, max) {
              return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
           },
           formatMatch: function(row, i, max) {
              return row.name + " " + row.to;
          },
          formatResult:function (row){
              return row.to;
         }});

And that’s it. You should now have a working friend selector :)

Related posts:

1. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...
2. Creating a Facebook Application – a guide for PHP, JavaScript, Flex and Grails developers If you’re a web developer and you haven’t explored...
3. How to create impressive animations in jQuery with .animate() I’ve been asked many times over the past month...

Related posts brought to you by Yet Another Related Posts Plugin.