У меня проблема с виджетами Kendo UI AutoComplete. У меня просто простое текстовое поле, на которое я применяю этот плагин, и когда пользователь выбирает значение в всплывающем окне предложения, значение помещается в одно и то же текстовое поле, а другое - в скрытое поле (в этом случае идентификатор выбранного элемента).
Чтобы хранить данные в скрытом поле, я использую событие select.
Все работает отлично! Но, к сожалению, проблема возникает, если пользователь слишком быстр. Событие select не вызывается вообще, и виджет переходит к событию закрытия. Итак, правильное значение находится в текстовом поле, но скрытое поле пуст, потому что событие select не было вызвано.
Здесь моя полная функция:
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
});
});
};
Может кто-нибудь дать мне руку или просто объяснить мне, что я делаю неправильно? Это будет высоко ценится! Большое спасибо!
+ Изменить
delay: 0
к
delay: 500
Это заставит автозаполнение ждать 500 мс от последней клавиатуры до ее выполнения. Вы также можете добавить
minLength: 3
заставить минимум 3 ключа до выполнения автозаполнения