JQuery autocomplete, 3 values ​​or more

Question

I have very simple html with jQuery and jQuery UI, I use the autocomplete function, as far as this is good, the problem is that I have an array with three values, each of which blocks something like:

Array
(
    [0] => stdClass Object
        (
            [product_id] => 5
            [product_number] => AGD-ACRBD001
            [product_name] => Title 1 
        )

    [1] => stdClass Object
        (
            [product_id] => 6
            [product_number] => AGD-ACRBD002
            [product_name] => Title 6
        )

    [2] => stdClass Object
        (
            [product_id] => 7
            [product_number] => AGD-ACRBD003
            [product_name] => Title 34
        )
)

So this is my array, with this array I only need the number [product_number] to build my array for automatic completion, which is NOT a problem, the problem is how to use other values ​​when [product_number] was selected? ... HTML as follows:

<form>
     <input type="text" id="ids" name="ids" placeholder="Product ID">
     <input type="text" id="codes" name="codes" placeholder="Code">
     <input type="text" id="names" name="names" placeholder="Names">
</form>

, - id = "", , [product_number], ... , id = "ids" id = "names" ... jQuery :

(function($) {
        $(function() {
            var availableTags = [
                "AGD-ACRBD001",
                "AGD-ACRBD002",
                "AGD-ACRBD003"
            ];
            $("#codes").autocomplete({
                source: availableTags
            });
        });
    })(jQuery);

Answer 1

. . (product_id)

    <script>
         var availableTags = [
                "AGD-ACRBD001",
                "AGD-ACRBD002",
                "AGD-ACRBD003"
            ];
$(function(){
 $("#but").click(function(){
    var pr_code=$("#ids").val();
   // addToTags(pr_code);
     availableTags.push(pr_code);
 });


    $("#codes").autocomplete({
                source: availableTags
            });
});

    </script>

     <input type="text" id="ids" name="ids" placeholder="Product ID">
     <input type="text" id="codes" name="codes" placeholder="Code">
     <input type="text" id="names" name="names" placeholder="Names">
    <input type="button" id="but" value="create"/>

Answer 2

, , ...
,

Array
(
    [0] => stdClass Object
        (
            [product_id] => 5
            [product_number] => AGD-ACRBD001
            [product_name] => Title 1 
        )

    [1] => stdClass Object
        (
            [product_id] => 6
            [product_number] => AGD-ACRBD002
            [product_name] => Title 6
        )

    [2] => stdClass Object
        (
            [product_id] => 7
            [product_number] => AGD-ACRBD003
            [product_name] => Title 34
        )
)
// now lets make the json since this array is just a regular array
$bar = '';
foreach($arr as $k) {
   $bar .= '{value: $k->product_id, label: $k->product_number, description: $k->product_name},';
}
// lets trim the last " , "
$ls = substr($bars, 0, -1);
// done this now that we have our "manually build" json lets get down to the js and html
// I know I could use $ls=json_encode($arr);

jquery

(function($) {
        $(function() {
            $("#skus").autocomplete({
                source: [
                    <?php echo $ls; ?>
                ],
                select: function(event, ui) {
                    var w = ui.item;
                    event.preventDefault();
                    $("#skus").val(w.label);
                    this.value = w.label;
                    $("#ids").val(w.value);
                    $("#names").val(w.description);
                }
            });
        });
    })(jQuery);

HTML-

<form class="myCoolForm">
   <input id="skus" class="inp" type="text">
   <input id="ids" class="inp" type="text">
   <input id="names" class="inp" type="text">
</form>

! : http://jsfiddle.net/xeLuma72/1/