Help shortening repeated jQuery event listeners

My code repeats as foll开发者_JAVA百科ows:

$("#school-name").autocomplete("/ajax/campus_ajax.php", {
    width: 218,
    delay: 300,
    selectFirst: false,
    resultsClass: 'ac_results_class',
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2]) 
        { 
            return data[0] + '<small>' + data[2] + '</small>'; 
        }
        else
        {
            return data[0];
        }
    }
});

$("#school-name-optional").autocomplete("/ajax/campus_ajax.php", {
    width: 358,
    delay: 300,
    selectFirst: false,
    resultsClass: 'ac_results_book',
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2]) 
        { 
            return data[0] + '<small>' + data[2] + '</small>'; 
        }
        else
        {
            return data[0];
        }
    }
});

As you can see, the two event listeners only differ in a couple of parameters. How should I shorten this code?

IMO, shortening this code makes it less readable and as configuration parameters outside the reach of DRY (Don't Repeat Yourself).

With that said, to answer your questions, there are two quick things you could do.

First, break out the formatItem into a generic function instead of an anonymous function.

function myFormatItem(data) {
...
}

then use:

formatItem: myFormatItem

Second, you could create the base configuration options, then extend them.

var config = {width: 218,
        delay: 300,
        selectFirst: false,
        resultsClass: 'ac_results_book',
        loadingClass: 'ac_loading',
        formatItem: myFormatItem}

$("#school-name").autocomplete("/ajax/campus_ajax.php", config);

var config2 = config;
config2.width = 358;
$("#school-name").autocomplete("/ajax/campus_ajax.php", config2);

Break it into a function.

schoolNameAutocomplete($("#school-name"), 218);
schoolNameAutocomplete($("#school-name-optional"), 358);
function schoolNameAutocomplete(element, width) {
    element.autocomplete("/ajax/campus_ajax.php", {
        width: width,
        delay: 300,
        selectFirst: false,
        resultsClass: 'ac_results_book',
        loadingClass: 'ac_loading',
        formatItem: function(data)
        {
            if (data[2]) 
            { 
                return data[0] + '<small>' + data[2] + '</small>'; 
            }
            else
            {
                return data[0];
            }
        }
    });
}

Instead of using an anonymous object, save the object to a var and modify it accordingly for the different calls.

I made a facade to jQuery UI's dialog functionality where I had to do something similar:

function createDefaultOptions(type) {
    var 
    options = {
        dialogClass: 'webDialog',
        width: 300,
        callback: function() { },
        modal: true,
        draggable: false,
        resizable: false,
        closeText: '',
        zIndex: 10000,
        hide: { effect: 'slide', duration: 500 }
    },

    okButton = {
        OK: function() {
            options.callback({ button: 'OK' });
            $(this).dialog('close');
        }
    },

    yesNoButtons = {
        Yes: function() {
            options.callback({ button: 'Yes' });
            $(this).dialog('close');
        },
        No: function() {
            options.callback({ button: 'No' });
            $(this).dialog('close');
        }
    };

    switch (type) {
        case 'general':
            options.title = 'Message';
            options.buttons = okButton;
            break;
        case 'error':
            options.title = 'Error';
            options.buttons = okButton;
            options.dialogClass += ' webDialogError';
            break;
        case 'success':
            options.title = 'Success';
            options.buttons = okButton;
            options.dialogClass += ' webDialogSuccess';
            break;
        case 'confirm':
            options.title = 'Confirm';
            options.buttons = yesNoButtons;
            options.dialogClass += ' webDialogConfirm';
            break;
    }

    return options;
}

Try this.

var params = {
    delay: 300,
    selectFirst: false,
    loadingClass: 'ac_loading',
    formatItem: function(data)
    {
        if (data[2])
        {
            return data[0] + '<small>' + data[2] + '</small>';
        }
        else
        {
            return data[0];
        }
    }
};

$("#school-name").autocomplete("/ajax/campus_ajax.php", $.extend(params, {
    width: 218,
    resultsClass: 'ac_results_class'
}));

$("#school-name-optional").autocomplete("/ajax/campus_ajax.php", $.extend(params, {
    width: 358,
    resultsClass: 'ac_results_book'
}));

Make a generic function for the formatItem handler and then use it as a reference:

function doSomething(){

}
//...
formatItem: doSomething

that way the only thing you need to change are the basic properties.