Skip to content

Instantly share code, notes, and snippets.

@anativ
Created June 10, 2012 19:56
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anativ/2907134 to your computer and use it in GitHub Desktop.
Save anativ/2907134 to your computer and use it in GitHub Desktop.
Search Facebook Friends with jQuery
<script>
$(function() {
$( "#autocomplete-input" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://graph.facebook.com/me/friends?access_token=AAAAAAITEghMBAMDBQ94HP7mX7JoDeCS6JVhN19bC4mXSvGdAglokKNC2hUYcc1uOHTZBXtWvxhxIYU7ZCVCXKxnw46nISYSFfTO26QRQZDZD&callback=?",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
res = $.map( data.data, function( item ) {
if (item.name.toLowerCase().indexOf(request.term.toLowerCase()) >= 0){
return {
label: item.name,
value: item.id
}
}
});
response(res);
}
});
},
minLength: 0,
select: function( event, ui ) {
// log( ui.item ?
// "Selected: " + ui.item.label :
// "Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
$("#autocomplete-input").data("autocomplete")._renderItem = function( ul, item ) {
console.log(item);
var image_url = "http://graph.facebook.com/" + item.value +"/picture";
return $( "<li>" )
.append($("<img style='float:left'>").attr('src',image_url))
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
}
});
</script>
</head>
<body></body>
<input id="autocomplete-input" />
</body>
@Peter-Hudson
Copy link

If you are getting the error autocomplete is not a function you need to download the jQuery autocomplete plugin - http://jqueryui.com/autocomplete/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment