facebook-friend-autocomplete/demo.html at master · davgit/facebook-friend-autocomplete · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html>
  <head>
    <title>Facebook Autocomplete Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="facebook-friend-autocomplete.js"></script>
    <link rel="stylesheet" href="facebook-friend-autocomplete.css">
    <style>
      body {
        font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
        color: #333;
        text-align: center;
      }

      button {
        border: 1px solid #333;
        background: #6d84b4;
        color: #fff;
        padding: 5px 10px;
        cursor: pointer;
      }

      .demo {
        display: inline-block;
        width: 33%;
        vertical-align: top;
      }

      input {
        width: 250px;
        border: 1px solid #333;
        outline: none;
        padding: 2px 5px;
      }

      .friend {
        margin: 0 auto;
      }

      .friend h3 {
        display: inline;
        margin: 0 10px;
      }
    </style>
  </head>
  <body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId: '216297128537775'
      });

      $('#fb-login').on('click', function() {
        FB.login();
      });

      FB.Event.subscribe('auth.authResponseChange', function(response) {
        if (response.status === 'connected') {
          $('#login').remove();

          // Default
          $('#fb-input1').facebookAutocomplete(function(friend) {
            createFriendElement(friend).insertBefore($(this)).next().remove();
          });

          // No Avatars
          $('#fb-input2').facebookAutocomplete({
              showAvatars: false,
              onpick: function(friend) {
                createFriendElement(friend).insertBefore($(this)).next().remove();
              }
          });

          // Big Avatars
          $('#fb-input3').facebookAutocomplete({
              avatarSize: 64,
              onpick: function(friend) {
                createFriendElement(friend).insertBefore($(this)).next().remove();
              }
          });

          // More Suggestions
          $('#fb-input4').facebookAutocomplete({
              maxSuggestions: 12,
              onpick: function(friend) {
                createFriendElement(friend).insertBefore($(this)).next().remove();
              }
          });

        } else {
          $('#demos').remove();
        }
      });
    };

    function createFriendElement(friend) {
      var $img = $('<img>').attr('src', friend.picture),
          $name = $('<h3>').text(friend.name),
          $friend = $('<div>').addClass('friend').append($img, $name);
      return $friend;
    }

    // Load the SDK asynchronously
    (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
    }(document));
  </script>

  <h1>Demo Page For The Facebook Friend Autocomplete Plugin</h1>

  <div id="demos">
    <div class="demo">
      <h2>Demo #1: Default</h2>
      <input type="text" id="fb-input1" />
    </div>
    <div class="demo">
      <h2>Demo #2: No Avatars</h2>
      <input type="text" id="fb-input2" />
    </div>
    <div class="demo">
      <h2>Demo #3: Big Avatars</h2>
      <input type="text" id="fb-input3" />
    </div>
    <div class="demo">
      <h2>Demo #4: More Suggestions</h2>
      <input type="text" id="fb-input4" />
    </div>
  </div>
  <div id="login">
    <h2>Login in with Facebook to view the demo</h2>
    <p>Don't worry, no data is saved anywhere</p>
    <button id="fb-login">Login</button>
  </div>
  </body>
</html>