Get selected object in Kendo Autocomplete

Question

I have a Kendo Autocomplete 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 autocomplete.
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 autocomplete ?

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.

Chandelier

Answer 1

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 coming from IE, I was going from one autocomplete 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-completion 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".

Chandelier

Working Fine. Thanks :) – Montalvo

Answer 2

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);
                    }
                }

Foreside

I need to get the datas in an external function to get the datas of many Autocompletes and dropdownLists in a pop-up so I can't use the onSelect function, can I ? I tried to use the item.index() like this : oVehicule._Transporteur = transp.dataItem(transp.item.index()); but I get an exception telling me that "index" is not supported – Chandelier

You can just use var value = $("#Ac_Transporteur").val(); to get the entered value in the Autocomplete field. – Foreside

Answer 3

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

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

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

Atilt

I tried this : var transp = $("#Ac_Transporteur").data("kendoAutoComplete"); oVehicule._Transporteur = transp.dataItem(); but what I get in oVehicule._Transporteur is "undefined". – Chandelier

AutoComplete does not have a .dataItem() that does not require a parameter. Apparently, if you want an index, you have to either capture the dataItem and save it in the select event handler or use a ComboBox. Outside of event handlers, the only thing you can get from an AutoComplete widget is the selected text. – Tb

Answer 4

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

Divan