Kendo UI AutoComplete ウィジェットに問題があります。このプラグインを適用する単純なテキスト フィールドがあり、ユーザーが提案ポップアップで値を選択すると、その値が同じテキスト フィールドに入力され、別の値が非表示フィールドに格納されます (この場合、id選択した項目の)。
非表示フィールドにデータを格納するには、select イベントを使用します。
すべてがうまくいきます！しかし残念なことに、ユーザーが速すぎると問題が発生します。select イベントはまったく呼び出されず、ウィジェットは close イベントにジャンプします。そのため、正しい値はテキスト フィールドにありますが、選択イベントが呼び出されなかったため、非表示フィールドは空です。
ここに私の完全な機能があります:
function myAutoComplete() {
$("input.autocomplete").each(function() {
var thisId = $(this).attr('id');
if (!$(this).data('ac_applied')) {
$(this).data('ac_applied',true);
var acCase = '';
var parentForm = '';
var parentDiv = '';
var prefixTarget = '';
var selectorTarget = '';
var hiddenVal = '';
var selectedEnt = '';
if ($(this).hasClass('ac-cli')) {
acCase = 1;
selectorTarget = 'client_id';
hiddenVal = 'dataItem.CLI_NUM';
}
else if ($(this).hasClass('ac-ent')) {
acCase = 2;
selectorTarget = 'entreprise_id';
hiddenVal = 'dataItem.ENT_NUM';
}
else if ($(this).hasClass('ac-suc')) {
acCase = 3;
selectorTarget = 'succursale_id';
hiddenVal = 'dataItem.SUC_NUM';
}
else if ($(this).hasClass('ac-res')) {
acCase = 4;
selectorTarget = 'ressource_id';
hiddenVal = 'dataItem.id';
}
parentForm = $(this).closest('form').attr('id');
if ($('#'+parentForm).hasClass('add-item-form')) {
parentDiv = $('#'+parentForm).closest('div.add-item-tool-tip').attr('id');
var parentToolTip = $('#'+parentDiv).closest('div.qtip').attr('id');
prefixTarget = '#'+parentToolTip;
}
else {
prefixTarget = '#ajoutTicket';
}
$(this).kendoAutoComplete({
dataSource: new kendo.data.DataSource({
transport: {
read: {
url : "utils/autocomplete.php",
cache : false
},
parameterMap: function(options, operation) {
return {
contains: options.filter.filters[0].value,
case: acCase,
ent: $(prefixTarget + ' input[id*="entreprise_id"]').val()
};
}
},
schema: {
data: "data"
},
serverFiltering: true
}),
open: function(e) {
var inputWidth = $('#'+thisId).css('width');
$('div.k-animation-container').width(inputWidth);
},
select: function(e){
var dataItem = this.dataItem(e.item.index());
switch (acCase) {
case 1 :
$(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.CLI_NUM);
if (prefixTarget == '#ajoutTicket') {
if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'OUI') {
$("#mailchoix_rd1").attr('checked', false);
$("#mailchoix_rd2").attr('checked', true);
}
else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'NON') {
$("#mailchoix_rd1").attr('checked', true);
$("#mailchoix_rd2").attr('checked', false);
}
else if (dataItem.CLI_TICKET_EMAIL == 'OUI' && dataItem.ENT_TICKET == 'NON') {
$("#mailchoix_rd1").attr('checked', false);
$("#mailchoix_rd2").attr('checked', true);
}
else if (dataItem.CLI_TICKET_EMAIL == 'NON' && dataItem.ENT_TICKET == 'OUI') {
$("#mailchoix_rd1").attr('checked', false);
$("#mailchoix_rd2").attr('checked', true);
}
if (dataItem.ENT_FACTURATION == 1) {
$("#radio_fact_1").prop('checked', true);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', false);
}
else if (dataItem.ENT_FACTURATION == 2) {
$("#radio_fact_1").prop('checked', false);
$("#radio_fact_2").prop('checked', true);
$("#radio_fact_3").prop('checked', false);
}
else if (dataItem.ENT_FACTURATION == 3) {
$("#radio_fact_1").prop('checked', false);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', true);
}
else {
$("#radio_fact_1").prop('checked', true);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', false);
}
}
break;
case 2 :
$(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.ENT_NUM);
if (prefixTarget == '#ajoutTicket') {
if (dataItem.ENT_FACTURATION == 1) {
$("#radio_fact_1").prop('checked', true);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', false);
}
else if (dataItem.ENT_FACTURATION == 2) {
$("#radio_fact_1").prop('checked', false);
$("#radio_fact_2").prop('checked', true);
$("#radio_fact_3").prop('checked', false);
}
else if (dataItem.ENT_FACTURATION == 3) {
$("#radio_fact_1").prop('checked', false);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', true);
}
else {
$("#radio_fact_1").prop('checked', true);
$("#radio_fact_2").prop('checked', false);
$("#radio_fact_3").prop('checked', false);
}
}
break;
case 3 :
$(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.SUC_NUM);
break;
case 4 :
$(prefixTarget + ' input[id*="'+selectorTarget+'"]').val(dataItem.id);
break;
}
},
close: function(e) {
alert('close');
},
highlightFirst: true,
suggest: true,
dataTextField: "SearchField",
animation: false,
delay: 0
});
});
};
誰かが私に手を差し伸べたり、私が間違っていることを説明したりできますか? それは大歓迎です！どうもありがとうございました！