自动完成在自动完成窗口中显示相关数据 [英] autocomplete display relevant data in autocomplete window

问题描述

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

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

而不是

选择之后它应该是这样的

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

推荐答案

您需要更改autocomplete.php然后返回全部3个值，您可以在json数组中轻松地执行此操作 http：// php。 net / manual / en / function.json-encode.php 然后读取jquery脚本中的值。

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.

这是你更新的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: 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);
    }              
 });
});

这篇关于自动完成在自动完成窗口中显示相关数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！