jQuery autocomplete

Question

I do need to use jQuery autocomplete for two inputs. But I have use same processing script for these two elements.

At this stage I am doing it like this:

    $("#suburb").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "includes/state_au_ajax.php",
            dataType: "json",
            method: "post",
            data: {
                term : request.term,
                state : $("#state").val()
            },
                        success: function( data ) {
                             response( $.map( data, function( item ) {
                                var code = item.split("|");
                                return {
                                    label: code[0],
                                    value: code[0],
                                    data : item
                                }
                            }));
                        }
        });
    },
    autoFocus: true,            
    minLength: 2,
      select: function( event, ui ) {
            var output = ui.item.data.split("|");                       
            $('#zip_code').val(output[1]);
        },  
    delay: 300
  });   

    // --- Populate ZIP code according to the value of "Suburb"
    $("#p_suburb").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "includes/state_au_ajax.php",
            dataType: "json",
            method: "post",
            data: {
                term : request.term,
                state : $("#p_state").val()
            },
                        success: function( data ) {
                             response( $.map( data, function( item ) {
                                var code = item.split("|");
                                return {
                                    label: code[0],
                                    value: code[0],
                                    data : item
                                }
                            }));
                        }
        });
    },
    autoFocus: true,            
    minLength: 2,
      select: function( event, ui ) {
            var output = ui.item.data.split("|");                       
            $('#p_zip_code').val(output[1]);
        },  
    delay: 300
  });

Can I write this without any code duplication?

Answer 1

You could write a function which does everything which is identical in both cases and gets parameters for the differences. This is how it could look like:

function suburbAutocomplete(suburbFieldId, stateFieldId, zipCodeFieldId) {
    $('#' + suburbFieldId).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "includes/state_au_ajax.php",
            dataType: "json",
            method: "post",
            data: {
                term : request.term,
                state : $('#' + stateFieldId).val()
            },
                        success: function( data ) {
                             response( $.map( data, function( item ) {
                                var code = item.split("|");
                                return {
                                    label: code[0],
                                    value: code[0],
                                    data : item
                                }
                            }));
                        }
        });
    },
    autoFocus: true,
    minLength: 2,
      select: function( event, ui ) {
            var output = ui.item.data.split("|");
            $('#' + zipCodeFieldId).val(output[1]);
        },
    delay: 300
  });
}

And this is how you would call it:

suburbAutocomplete('suburb', 'state', 'zip_code');
suburbAutocomplete('p_suburb', 'p_state', 'p_zip_code');

However depending on your HTML structure there might be even better solutions. One idea would be to add a (or reuse an existing) element around each group of suburb, zipCode and state field. This element could get a unique id which is given to the new function and then used for the selectors. For example if your html would look like this:

<div id="fieldGroup">
    <input type="text" id="suburb" class="suburb" />
    <input type="text" id="state" class="state" />
    <input type="text" id="zipCode" class="zipCode" />
</div>
<div id="p_fieldGroup">
    <input type="text" id="p_suburb" class="suburb" />
    <input type="text" id="p_state" class="state" />
    <input type="text" id="p_zipCode" class="zipCode" />
</div>

The function could have this signature:

function suburbAutocomplete(fieldGroupId) {

And the selectors from the function above could look like this:

$('#' + fieldGroupId + ' .suburb')
$('#' + fieldGroupId + ' .state')
$('#' + fieldGroupId + ' .zipCode')

The calls of the function would then look like this:

suburbAutocomplete('fieldGroup');
suburbAutocomplete('p_fieldGroup');

Please be aware that you need to use classes to match the elements, as ids need to be unique on each page.