Question

I have a form with several input fields for a User to add their Facebook friends. I want those input fields to auto-complete with names from their Facebook friends list, and then when the form is submitted, the value sent is the id for those friends.

Here is an snippet of the Facebook friends feed for a User:

   [ {
         "name": "Joe Smith",
         "id": "6500000"
      },
      {
         "name": "Andrew Smith",
         "id": "82000"
      },
      {
         "name": "Dora Smith",
         "id": "97000000"
      },
      {
         "name": "Jacki Smith",
         "id": "107000"
      } ]

Here’s what the relevant form HTML is so far.

<label>Name</label>
<input type="text" name="name-1" id="name-1" />
<input type="hidden" id="fbid-1" /><br/>
<label>Name</label>
<input type="text" name="name-2" id="name-2" />
<input type="hidden" id="fbid-2" /><br/>
<label>Name</label>
<input type="text" name="name-3" id="name-3" />
<input type="hidden" id="fbid-3" /><br/>
<label>Name</label>
<input type="text" name="name-4" id="name-4" />
<input type="hidden" id="fbid-4" /><br/>

I’m using jQuery to handle the POST of this form. I was looking at jQuery’s autocomplete plugin, but I’m uncertain if that will allow me to set in the name AND id for a Facebook friend.

Answer 1

take a look at this code example, its working fine, you will need to do some small changes to the code if you want to have more than one inputs.

http://blogs.microsoft.co.il/blogs/alon_nativ/archive/2011/05/30/search-facebook-friends-with-jquery-autocomplete.aspx