Identical jQuery autocomplete handlers for two form fields

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
  });   

My question is, Can I write this without any code duplication?

Answer 1

You can create separate function like this:

function autoComplete($obj, $valueObj, $zipValue){
        $obj.autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "includes/state_au_ajax.php",
                    dataType: "json",
                    method: "post",
                    data: {
                        term : request.term,
                        state : $valueObj.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("|");                       
                    $zipValue.val(output[1]);
                },  
            delay: 300
          });  
    }

And then call it appropriately:

    autoComplete($("#suburb"), $("#state"), $('#zip_code'))
    autoComplete($("#p_suburb"), $("#p_state"), $('#p_zip_code'))