Функция автозаполнения JQuery-ui с идентификатором и значением в ответе, но как отобразить значение в текстовом поле автозаполнения и идентификатор в тексте скрытого ящика - PullRequest
Новая
       21

Функция автозаполнения JQuery-ui с идентификатором и значением в ответе, но как отобразить значение в текстовом поле автозаполнения и идентификатор в тексте скрытого ящика

0 голосов
/ 16 мая 2019

Я получаю ответ Spring JPA в следующем формате 

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

и достигаю параметра ajax -> success -> data . Теперь я хотел показать только значение в текстовом поле автозаполнения иключ скрыт.Перепробовал все способы сделать это, но я могу где-то упустить какую-то мелочь.Небольшой взгляд и помощь в моем коде будут действительно полезны.Застрял с 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 голосов
/ 17 мая 2019

Каким-то образом это начало работать.Ниже приведено решение.Буду продолжать обновлять, если у меня есть какие-либо обновления. 

$( "#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" );
...