autocomplete display relevant data in autocomplete window

Question

I have 3 input fields , 1 for data type and other 2 are its relevant. when i press button in data type field i want to display autocomplete window like this

instead of this

And after select it should look like this

HTML

<tr>
   <td><input type="text" id="no_1" class="form-control"></td>            
   <td><input type="text" data-type="vehicle" id="vehicle_1" class="type form-control"></td>
   <td><input type="text" id="type_1" class="form-control"></td>
</tr>

JS

$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;   
$(this).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'autocomplete.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
               type: type
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {
                        label: code[autoTypeNo],
                        value: code[autoTypeNo],
                        data : item
                    }
                }));
            }
        });
    },
    autoFocus: true,           
    minLength: 0,
    select: function( event, ui ) {
        var names = ui.item.data.split("|");                       
        id_arr = $(this).attr('id');
        id = id_arr.split("_");
        $('#no_'+id[1]).val(names[0]);
        $('#vehicle_'+id[1]).val(names[1]);
        $('#type_'+id[1]).val(names[2]);
    }              
 });
});

Answer 1

You need to alter autocomplete.php then to return all 3 values, you can do this in a json array easily http://php.net/manual/en/function.json-encode.php then read the values in your jquery script.

This is your updated JS script

$(document).on('focus','.type',function(){
type = $(this).data('type');
if(type =='vehicle' )autoTypeNo = 1;   
$(this).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url : 'autocomplete.php',
            dataType: "json",
            method: 'post',
            data: {
               name_startsWith: request.term,
              type: type
            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    //var code = item.split("|");
                    return {
                        label: item.no + '-' + item.vehicle + '-' + item.type,
                        value: item.vehicle,
                        data : item
                    }
                }));
            }
        });
    },
    autoFocus: true,           
    minLength: 0,
    select: function( event, ui ) {
        //var names = ui.item.data.split("|");                       
        id_arr = $(this).attr('id');
        id = id_arr.split("_");
        $('#no_'+id[1]).val(ui.item.data.no);
        $('#vehicle_'+id[1]).val(ui.item.data.vehicle);
        $('#type_'+id[1]).val(ui.item.data.type);
    }              
 });
});