Find name of form input of dynamically created autocomplete

Question

I have a form that has dynamically created autocomplete form fields. What I would like to do is get the name of the autocomplete field and send it to a coldfusion cfc within the data request. This is the code that I am trying with no luck.

$("[id^=applinput_]").each(function(){
            app_id = this.id.split("_");
            id = app_id[1];

            $("#applinput_"+ id).autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "cfc/cfc_Appliance.cfc?method=getAppliance&returnformat=json",
                        dataType: "json",
                        data: {
                            nameApplianceSearchString: request.term,
                            nameApplianceTypeString: $(this).attr("name"), 
                            maxRows: 25,
                            style: "full",
                        },

                        success: function(data) {
                            response(data);
                        }
                    })
                },
                select: function(event, ui) {
                        //separate id and checkbox
                        app_selid = this.id.split("_");
                        //separate id 
                        applid = app_selid[1];  
                $(this).val(ui.item.label);
                $('#typeinput_' + applid).val(ui.item.type);
                $('#hidden_typeinput_' + applid).val(ui.item.typeID);
                return false;
                },
            })
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) 
            {
                return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append('<a onmouseover=$("#span' + item.value + '").show(); onmouseout=$("#span' + item.value + '").hide();><span style="float:left;" >' + item.label + '</span><span  id="span' + item.value + '" style="float: right;height:inherit; font-size: 13px; font-weight: bold; padding-top: 0.3em; padding-right: 0.4em; padding-bottom: 0.3em; padding-left: 0.4em; display: none; cursor:pointer; " onclick=javascript:event.stopPropagation();showprofile("' + item.value + '");><!---view profile---></span><div style="clear:both; height:auto;"></div></a>')
                .appendTo( ul );
            };      
        } catch(exception){}
        });

When the request fires off to the cfc, it does so without the nameApplianceTypeString.

Answer 1

Replace this chunk:

data: {
       nameApplianceSearchString: request.term,
       nameApplianceTypeString: $(this).attr("name"), 
       maxRows: 25,
       style: "full",
        },

with this:

data: {
       nameApplianceSearchString: request.term,
       nameApplianceTypeString: $(this.element).attr("name"), 
       maxRows: 25,
       style: "full"
       },

Here's a fiddle: http://jsfiddle.net/jeBUV/

Note that I had to modify it slightly to get an ajax call to work in jsfiddle. See the jsfiddle docs for clarification on making ajax requests in fiddle: http://doc.jsfiddle.net/use/echo.html