bootandy/suggest_fb.html

## suggest_fb.html
<html>
    <!-- Requires - jquery and jquery-ui -->
    <link type="text/css" href="static/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="static/js/jquery-ui-1.8.20.custom.min.js"></script>

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'PUT APPID HERE',
    status : false, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });

 // do_friend_load();
 FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
       do_friend_load();
     });
   } else {
     console.log('User cancelled login or did not fully authorize.');
   }
 });


function do_friend_load() {
  var makeItems = function(fbresponse) {
    return $.map(fbresponse, function(item) {
      return {
        label: item.name,
        fb_id: item.id,
      }
    });
  };

  var setAutoComplete = function(parsed_items) {
    //console.log(parsed_items)

    $("#input_13").autocomplete({
      source : parsed_items,
      select : function(event, ui){
//        console.log(ui)
//        alert( ui.item.value + " ~ " + ui.item.label )
        $("#input_13").val(ui.item.label);
        $("#input_10").val(ui.item.fb_id);
        return false;
      }
    }).data("autocomplete")._renderItem = function(ul, item) {
      return $("<li></li>")
        .data("item.autocomplete", item)
        .append( "<a>"+loadImage(item.fb_id, item.label) + "</a>" )
        .appendTo(ul);
    };
  };

  FB.api('/me/friends', function(fbresponse) {
    console.log(fbresponse)
    setAutoComplete(makeItems(fbresponse.data));
  });
}

      function loadImage(id, name) {
          var img_src = "http://graph.facebook.com/" + id + "/picture?type=square";
          return "<div class='test2'><img class='test' width='32px' height='32px' src='" + img_src + "'></img><span>" + name + "</span></div>";
      }
   </script>

<body>
   Write a friend's name
   <input id="input_13" />
   <input id="input_10" />
</body>

</html>
	<html>
	<!-- Requires - jquery and jquery-ui -->
	<link type="text/css" href="static/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="static/js/jquery-ui-1.8.20.custom.min.js"></script>

	<div id="fb-root"></div>
	<script src="http://connect.facebook.net/en_US/all.js"></script>
	<script>
	FB.init({
	appId : 'PUT APPID HERE',
	status : false, // check login status
	cookie : true, // enable cookies to allow the server to access the session
	xfbml : true, // parse XFBML
	channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
	oauth : true // enable OAuth 2.0
	});

	// do_friend_load();
	FB.login(function(response) {
	if (response.authResponse) {
	console.log('Welcome! Fetching your information.... ');
	FB.api('/me', function(response) {
	console.log('Good to see you, ' + response.name + '.');
	do_friend_load();
	});
	} else {
	console.log('User cancelled login or did not fully authorize.');
	}
	});


	function do_friend_load() {
	var makeItems = function(fbresponse) {
	return $.map(fbresponse, function(item) {
	return {
	label: item.name,
	fb_id: item.id,
	}
	});
	};

	var setAutoComplete = function(parsed_items) {
	//console.log(parsed_items)

	$("#input_13").autocomplete({
	source : parsed_items,
	select : function(event, ui){
	// console.log(ui)
	// alert( ui.item.value + " ~ " + ui.item.label )
	$("#input_13").val(ui.item.label);
	$("#input_10").val(ui.item.fb_id);
	return false;
	}
	}).data("autocomplete")._renderItem = function(ul, item) {
	return $("<li></li>")
	.data("item.autocomplete", item)
	.append( "<a>"+loadImage(item.fb_id, item.label) + "</a>" )
	.appendTo(ul);
	};
	};

	FB.api('/me/friends', function(fbresponse) {
	console.log(fbresponse)
	setAutoComplete(makeItems(fbresponse.data));
	});
	}

	function loadImage(id, name) {
	var img_src = "http://graph.facebook.com/" + id + "/picture?type=square";
	return "<div class='test2'><img class='test' width='32px' height='32px' src='" + img_src + "'></img><span>" + name + "</span></div>";
	}
	</script>

	<body>
	Write a friend's name
	<input id="input_13" />
	<input id="input_10" />
	</body>

	</html>