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


   minChars: 3,
   parse: function(data) {
     parsed = [];
     var data = eval(data);
     for (var i = 0; i < data.length; i++) {
       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,



Reply via email to