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.

score 5 · Answer 1 · answered Aug 02 '16 at 19:02

5

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

answered Aug 02 '16 at 19:02

Vijai

2,369
3
25
32

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 – Axel GALLIOT Aug 03 '16 at 06:30
You can just use var value = $("#Ac_Transporteur").val(); to get the entered value in the Autocomplete field. – Vijai Aug 03 '16 at 16:10

score 1 · Answer 2 · answered Aug 02 '16 at 15:06

1

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

answered Aug 02 '16 at 15:06

The Dread Pirate Stephen

3,089
1
12
14

I tried this : `var transp = $("#Ac_Transporteur").data("kendoAutoComplete"); oVehicule._Transporteur = transp.dataItem();` but what I get in oVehicule._Transporteur is "undefined". – Axel GALLIOT Aug 03 '16 at 06:20
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. – Suncat2000 May 13 '20 at 11:54

Axel GALLIOT · Accepted Answer · 2016-08-03T10:21:45.527

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".

edited Aug 03 '16 at 10:21

answered Aug 03 '16 at 09:02

Axel GALLIOT

157
2
2
12

Working Fine. Thanks :) – Thulasiram Oct 09 '19 at 07:51

score 0 · Answer 4 · answered May 02 '17 at 10:55

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

Get selected object in Kendo Autocomplete

4 Answers4