Send additional data with autocomplete options

Question

I have a field that autocompletes on person name, so it has options like "Obama, Barack", "Lincoln, Abe", etc.

These people also have additional attributes, say "Birthplace" and "Phone number". When a user picks an option from the autocomplete, I would like that person's additional attributes to automatically populate hidden form fields.

The web service that supplies the autocomplete options also knows everyone's birthplace and phone number, so it could send this data to the client. However, the jQuery autocomplete plugin I'm using doesn't accept any additional data like this -- you can only give it the autocomplete options.

Any thoughts on how to do this?

Answer 1

Use YUI :)

Handles all that, completely customizable out of the box.

Answer 2

I'm not familiar with the autocomplete plugin but: Why not download all the data from the server and then only feed the autocomplete what it needs. I.e.

var persons = {
 abe: {
   name: 'abe',
   birthplace: 'I\'m not from the US so I have no clue'
  },
 Obama: {
   name: 'Obama',
   birthplace: 'please see abe'
 }
};

Then do something like:

for(name in persons){
 feedAutocomplete(name); //or persons[name].name
}

Or if you need to feed the autocomplete in one Array:

autoCompleteArray = Array();
for(name in persons){
 autoCompleteArray.push(name);
}
feedAutocomplete( autoCompleteArray );

And onAutoComplete callback:

function onAutoComplete(name){
  //or if the currect value is not supplied in
  // the function: var name = $('#autocompleField').val();
  var personInfo = persons[name]; 
  $('#hiddenFieldBirthplace').val( personInfo.birthplace );
}

Answer 3

I believe the auto-complete plug-in allows for callback functions. You could populate the hidden fields based on the users selection in that function.