I have a Kendo Autoplete item :

<input type="text" id="Ac_Transporteur" class="" maxlength="30" required/>
--------------------------------------------------------------------------
    $("#Ac_Transporteur").kendoAutoComplete({
    dataTextField: "Nom",
    //Not interesting code here
    dataSource: dsTransporteurs,
    suggest: true,
    delay: 0
    });

I have no problem selecting my objects from my datasource dsTransporteur, but I need to get the object that is selected in the autoplete.
I tried this :

var transp = $("#Ac_Transporteur").data("kendoAutoComplete");
var transpSelect = transp.select();
oVehicule._Transporteur = transp.dataItem(transpSelect);

but transp.select() don't return the index of the object in the datasource and is "undefined".
Any idea how I can get the object selected in my autoplete ?

I also tried to add a global var named veh_Transporteur and added this :

change: function (e) {
        veh_TRANSPORTEUR = this.dataItem();
},

But I still have "undefined" in veh_TRANSPORTEUR.

I have a Kendo Autoplete item :

<input type="text" id="Ac_Transporteur" class="" maxlength="30" required/>
--------------------------------------------------------------------------
    $("#Ac_Transporteur").kendoAutoComplete({
    dataTextField: "Nom",
    //Not interesting code here
    dataSource: dsTransporteurs,
    suggest: true,
    delay: 0
    });

I have no problem selecting my objects from my datasource dsTransporteur, but I need to get the object that is selected in the autoplete.
I tried this :

var transp = $("#Ac_Transporteur").data("kendoAutoComplete");
var transpSelect = transp.select();
oVehicule._Transporteur = transp.dataItem(transpSelect);

but transp.select() don't return the index of the object in the datasource and is "undefined".
Any idea how I can get the object selected in my autoplete ?

I also tried to add a global var named veh_Transporteur and added this :

change: function (e) {
        veh_TRANSPORTEUR = this.dataItem();
},

But I still have "undefined" in veh_TRANSPORTEUR.

• javascript
• kendo-ui
• kendo-autoplete

4 Answers 4

Try the following

$("#Ac_Transporteur").kendoAutoComplete({
dataTextField: "Nom",
dataSource: dsTransporteurs,
suggest: true,
delay: 0,
select: onSelect
});

function onSelect(e) {
                        var dataItem = this.dataItem(e.item.index());
                        alert(dataItem);
                    }
                }

It seems that :

var test = this.dataItem();

don't work on IE, I tried my solution with the globals var on Firefox and it worked... Don't really know why I have this issue on IE.

EDIT : The problem wasn't ing from IE, I was going from one autoplete to another using tab. But, if I use the tab key or Enter key without selecting the element in the appearing list (if I only use the auto-pletion of the word) I'm passing in the change event, but there is nothing selected in my autoComplete, so the content of my var is "undefined".

AutoComplete.select() does not return the current selection, which is confusing as it usually does for the other widgets(Grid, TreeView). http://docs.telerik./kendo-ui/api/javascript/ui/autoplete#methods-select

The .dataItem() method without a parameter should return the selected object for an AutoComplete.

Example: http://dojo.telerik./@Stephen/eJonI

$("#Ac_Transporteur").kendoAutoComplete({
    dataTextField: "Nom",
    //Not interesting code here
    dataSource: dsTransporteurs,
    suggest: true,
    delay: 0
    });

$(document).ready(function () {
    var data = $('#Ac_Transporteur').data('kendoAutoComplete');
    var dataValue = data.value($("#value").val());
    var dataItem = data.dataItems();

    var find = dataItem.filter(x => x.Nom === dataValue)

    var Transporteur= new Array();
    Transporteur = find;
    alert(JSON.stringify(Transporteur));
}