jQuery Plugin For Facebook Friend Autocomplete Suggestion Box

A jQuery Facebook Friend Autocomplete plugin that provides a facebook-like friend suggestion box while a currently facebook logged in user types into the input field.

As of April 30th, 2014, Facebook has changed their API, with the major differences relevant to this plugin being:

• Getting the friend list is no longer a default permission, you must now request the user_friends permission in your scope.
• Only friends who have approved your application themselves will be returned in the list of the user's friends

The plugin will still work, but keep in mind that only a subset of the user's friends will be available to you, making it pretty much useless for situations where you want to let users invite their friends to your site.

The plugin requires JavaScript SDK so that you MUST replace the App ID with your App ID from the Facebook App Dashboard.

FB.init({
        appId: '216297128537775'
});

How to use it:

1. The Facebook Friend Autocomplete plugin requires the jQuery library already loaded.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="facebook-friend-autocomplete.js"></script>

2. Include required facebook-friend-autocomplete.css to style the interface.

<link rel="stylesheet" href="facebook-friend-autocomplete.css">

3. Create a standard text input filed where the facebook friend suggestion box will be attached to.

<input id="demo" type="text" />

4. Initialize the plugin on the input.

<script>
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
$('#demo').facebookAutocomplete(function(friend) {

createFriendElement(friend).insertBefore($(this)).next().remove();

});
}
});
</script>

5. Options.

<script>
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
$('#demo').facebookAutocomplete(function(friend) {
showAvatars: true, // show friend's avatars in suggestions
avatarSize: 32, // the avatar's width and height in suggestions in pixels
maxSuggestions: 6, // the maximum number of suggestions to show at once.
createFriendElement(friend).insertBefore($(this)).next().remove();
});
}
});
</script>

Change logs:

2014-12-04

• Work with invitable_friends

2014-04-25

• Clear input and empty suggestion list after picking instead of removing the list and keyup listener to enable selecting multiple friends.

---

This awesome jQuery plugin is developed by agelber. For more Advanced Usages, please check the demo page or visit the official website.