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