[jQuery] jquery.autocomplete, setting additional params based on dom element

[Rob Lacey]

Hi there,

I'm having an awful lot of bother trying to get this working. I want to 
implement auto completion for a text field as follows

<input type="text" name="user[name]" id="user_name" class="autocomplete" />
<input type="hidden" name="user[id]" id="user_id" />

Currently our application returns a json string which we eval to extract 
the results and once the item is selected it fills in the hidden field 
value with the id as well as the user_name content of the text field.

While the code we have works I need to make it more generic so I can 
reuse this for lots of form fields on the same page, with different ids 
/ names and select not only the correct data to be returned but populate 
the parsed array with the correct data based on the dom element's id. 
First up I really just want to be able to set extraParams in order to 
get the right data, something like...

extraParams: {
 type: function() { $(this).id.split('_')[0] }
 method: function() { $(this).id.split('_')[1] }
}

I appreciate that this doesn't work because $(this) is the autocomplete 
object and not the dom element. I can see that $input/input is used 
internally to reference the dom element but I can't seem to hook into it 
inside the overriding methods I am using. Can anyone give me any pointers?

current code

---------------------------------------------------------------------------------------------------

 $('input.autocomplete').autocomplete('/autocomplete',{
   minChars: 3,
   parse: function(data) {
     parsed = [];
     var data = eval(data);
     for (var i = 0; i < data.length; i++) {
       console.log(data[i].full_name);
       parsed[parsed.length] = {
         data: data[i],
         value: data[i].full_name,
         result: data[i].full_name
          };
        }
        return parsed;
   },
   formatItem: function(item) {
     return item.full_name;
   },
   extraParams: {
     type: function() { return $(this).id.split('_')[0] },
     method: function() { return $(this).id.split('_')[1]
   }
 }).result(function(event, item, formatted) {
     $(this).attr('value', item.full_name);
   $('#' + $(this).attr('rel')).attr('value', item.id);
 });



Any help on this would be greatly appreciated,


Cheers

RobL