自动完成在自动完成窗口中显示相关数据

Question

我有3个输入字段,1个用于数据类型,其他2个是相关的.当我在数据类型字段中按下按钮时,我想显示这样的自动完成窗口

而不是这个

选择之后应该看起来像这样

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