1
\$\begingroup\$

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?

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.