JQuery-ui自动完成功能具有ID和响应值,但是如何在自动完成文本框中显示值和在隐藏框文本中显示ID

时间:2019-05-16 14:42:54

标签: ajax jquery-ui jquery-ui-autocomplete

我收到以下格式的Spring JPA响应

[
    [12, "companyReferenceNumber1"],
    [13, "companyReferenceNumber2"],
    [14, "companyReferenceNumber3"],
    [15, "companyReferenceNumber4"],
    [16, "companyReferenceNumber5"],
    [17, "companyReferenceNumber6"],
    [18, "companyReferenceNumber7"],
    [19, "companyReferenceNumber8"],
    [20, "companyReferenceNumber9"],
    [21, "companyReferenceNumber10"]
]

并朝ajax->成功-> 数据参数 现在,我只想在自动完成文本框中显示值,并键入隐藏值。尝试了所有方法来做,但是我可能在某处缺少一些小东西。在我的代码上稍加查看和帮助将非常有帮助。从现在开始已有4天了。

//添加JQuery代码

$( "#employeeId" ).autocomplete({
    source: function( request, response ) {
    $.ajax( {
    url: "/searchEmployeeId",
    data: {
    term: request.term
    },
    success: function( data ) {
    response( $.map(data, function(item){
    return{ label: item.name, value: item.name };
    }));
    }
    } );
    },
    select: function (event, ui) {//Error here : ReferenceError: item is not defined
    $("#employeeId").val(ui.item[1]);
    $("#empId").val(ui.item[0]);
    alert(ui.item + "d");
    return false;
    },
    change: function( event, ui ) {
    $( "#employeeId" ).val( ui.item ? ui.item.value : 0 );
    },
    minLength: 2
    } );    

1 个答案:

答案 0 :(得分:0)

它以某种方式开始起作用。下面是解决方案。如果有任何更新,将继续更新。

$( "#employeeId" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "/searchEmployeeId",
data: {
term: request.term
},
success: function( data ) {
response( $.map(data, function(item){
return{ label: item[1], value: item[0] };
}));
}
} );
},
select: function (event, ui) {
$("#employeeId").val(ui.item.label);
$("#empId").val(ui.item.value);
return false;
},
focus: function(event, ui){
$("#employeeId").val(ui.item.label);
return false;
},
change: function( event, ui ) {
$( "#employeeId" ).val( ui.item ? ui.item.label : 0 );
},
minLength: 2
} );
$( "#employeeId" ).autocomplete( "option", "appendTo", ".eventInsForm" );