I have a problem with the Kendo UI AutoComplete widget. I just have a simple text field on which I apply this plugin and when the user selects a value in the suggestion popup, the value is put in the same text field and another one is stocked in an hidden field (in that case, the id of the selected item).
To store data in the hidden field, I use the select event.
Everything works fine! But unfortunately, a problem appears if the user is too quick. The select event is not called at all and the widget jumps to the close event. So, the right value is in the text field but the hidden field is empty because the select event was not called.
Here's my complete function :
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
});
});
};
Can someone give me a hand or just explain to me what I am doing wrong? It would be much appreciated! Thank you very much!
