JQuery reusable autocomplete function

Question

Hello fellow SO friends,

I am having trouble with my syntax in adding a .data custom render to this autocomplete function.

Where/how do I add:

.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.value + " | " + item.desc + "</a>" )
                .appendTo( ul );
};

To this code:

function Autocomplete(numberLocation,nameLocation,dscLocation,chargeLocation) {
    $(numberLocation).autocomplete ({
        minLength: 4, 
        source: function(request, response){             
            var fundnum = $(numberLocation).val(); 
            fundnum = escape(fundnum); 
            var querystring = "?term=" + fundnum; 
            if (typeof (window.sortorder)=='undefined'){
                querystring = querystring + '&sortorder=0'
            } else {
                querystring = querystring + '&sortorder=' + window.sortorder;                
            }
            $.ajax({
                url:      'ajax/fundid-autocomplete.php'+querystring,
                beforeSend: function(){},
                async:    true,
                dataType: "json",
                success: response
            });
        },
        focus: function ( event,ui ){     
            $(numberLocation).val( ui.item.value );
            return false;            
        },
        select: function( event, ui ) {          
                $(numberLocation).val( ui.item.value );
                $(nameLocation).html( ui.item.desc );                     
                    if(ui.item.dsc >0) {
                        chargeLocation.hide();                    
                        dscLocation.show();                          
                        dscLocation.html('DSC Charge: '+ui.item.dsc+' %');
                    } else {
                        dscLocation.html('');                    
                        chargeLocation.show();                       
                    }  
                    $('#numberlabel').html('Fund #*');
                return false;
        }        
    });          
} 

What's the right way to keep it so that it works with multiple inputs, please? Thanks!

Optional info: I am implementing the awesome code mentioned at: Part 1 and from Andrew Whitaker here.

I am using this to keep it generic, since my autocomplete will be repeated on at least four fields.

If I try to add it within the function it alerts me of a syntax error in Netbeans IDE.

Answer 1

You should be able to add it to the end of the autocomplete call:

function Autocomplete(numberLocation,nameLocation,dscLocation,chargeLocation) {
    $(fundNumberField).autocomplete ({
        minLength: 4, 
        source: function(request, response){             
            var fundnum = $('#str-misc-FundNumber1').val(); 
            fundnum = escape(fundnum); 
            var querystring = "?term=" + fundnum; 
            if (typeof (window.sortorder)=='undefined'){
                querystring = querystring + '&sortorder=0';
            } else {
                querystring = querystring + '&sortorder=' + window.sortorder;                
            }
            $.ajax({
                url:      'ajax/fundid-autocomplete.php'+querystring,
                beforeSend: function(){},
                async:    true,
                dataType: "json",
                success: response
            });
        },
        focus: function ( event,ui ){     
            $(numberLocation).val( ui.item.value );
            return false;            
        },
        select: function( event, ui ) {          
                $(numberLocation).val( ui.item.value );
                $(nameLocation).html( ui.item.desc );                     
                    if(ui.item.dsc >0) {
                        chargeLocation.hide();                    
                        dscLocation.show();                          
                        dscLocation.html('DSC Charge: '+ui.item.dsc+' %');
                    } else {
                        dscLocation.html('');                    
                        chargeLocation.show();                       
                    }  
                    $('#numberlabel').html('Fund #*');
                return false;
        }        
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.value + " | " + item.desc + "</a>" )
                .appendTo( ul );
    };         
}

When I run that code through JSLint I don't really have any issues (I did add a missing semicolon inside the source function). The only thing that's missing is the fundNumberField definition (I'm assuming that's defined elsewhere).