Created
January 18, 2012 19:53
-
-
Save aarongrando/1635158 to your computer and use it in GitHub Desktop.
jQuery UI Autocomplete Facebook Friends
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
// Depends on: jQuery, jQuery UI core & widgets (for the autocomplete method) | |
// Assumes you're already including the FB JS SDK asynchronously... | |
window.fbAsyncInit = function() { | |
FB.init({ | |
appId : 'xxxxxxxxxxxxxxxxxx', // App ID | |
status : true, // check login status | |
cookie : true, // enable cookies to allow the server to access the session | |
oauth : true, | |
xfbml : true | |
}); | |
FB.getLoginStatus(function (response) { | |
if (response.authResponse) { // if the user is authorized... | |
var accessToken = response.authResponse.accessToken | |
var tokenUrl = "https://graph.facebook.com/me/friends?access_token=" + accessToken + "&callback=?" | |
// Place <input id="name" /> and <input id="fbuid" /> into HTML | |
$("#name").autocomplete({ | |
source: function(request, add) { | |
$this = $(this) | |
// Call out to the Graph API for the friends list | |
$.ajax({ | |
url: tokenUrl, | |
dataType: "jsonp", | |
success: function(results){ | |
// Filter the results and return a label/value object array | |
var formatted = []; | |
for(var i = 0; i< results.data.length; i++) { | |
if (results.data[i].name.toLowerCase().indexOf($('#name').val().toLowerCase()) >= 0) | |
formatted.push({ | |
label: results.data[i].name, | |
value: results.data[i].id | |
}) | |
} | |
add(formatted); | |
} | |
}); | |
}, | |
select: function(event, ui) { | |
// Fill in the input fields | |
$('#name').val(ui.item.label) | |
$('#fbuid').val(ui.item.value) | |
// Prevent the value from being inserted in "#name" | |
return false; | |
}, | |
minLength: 2 | |
}); | |
} | |
}); | |
}; | |
}); |
can you please include an example of how this would be used with the html input form?
I tried doing this and added the two and in a html page. However, nothing happens when I type anything into the name input box. I monitored the http requests and found that no requests go out while I'm typing anything in.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Based on this: http://stackoverflow.com/questions/7026802/jquery-ui-autocomplete-friends-lists-from-facebook-graph-api-using-jsonp
...minus a bunch of cruft and updated for the modern FB.