Can I access the data item that was selected in AutoComplete control?

[Rik]

I have a Kendo AutoComplete control.
It fetches data from the remote json source.
The returned array looks a little like this...

[{"id":"50344","name":"Jane Doe"},{"id":"50562","name":"John Doe"}]

It is just a list of user names, and their user ids.

I want to grab the "id" field from this data when one of the users are selected from the dropdown list.

Is that possible?

[Jahn]

How would be the autocomplete control effective on my domain
http://www.easyiguanacare.info/taking_care_of_a_pet_iguana.html
if i add forms for providing information about personal details for e-commerce site?

Kindly analyse me site and please provide me the valid answer.

thanks in advance.

[PaulMrozowski]

I'm attempting to the same thing with the current version Q2 2012 (I'm using the MVC version but this shouldn't be specific to that) - the example code referenced in this thread:

function onSelect(e) {

   if ("kendoConsole" in window) {

      var dataItem = this.dataItem(e.item.index());

      kendoConsole.log("event :: select (" + dataItem + ")" );

   }

}

doesn't actually work. e.item doesn't exist. I have a template - when I select an item, my event fires. But accessing the "e.item" parameter fails.

How do I get access to this object?

Actually, I'm kind of surprised that it doesn't just pass the selected object as a parameter to the event - it seems like this is a pretty common requirement (and based on the # of views of this thread, it's probably safe to say it is).

EDIT: Apparently I was binding to the wrong event. I was binding to Change instead of Select.

[Eric]

Can you please give an example using the wrapper classes?

[Burke]

@(Html.Kendo().AutoComplete()
    .Name("countries")
    .Filter("startswith")
    .Placeholder("Select country...")
    .BindTo(new string[] {
        "Jane Doe",
        "John Doe"
    })
    .Separator(", ")
    .Events(e => e.Select("selectCountry"))
)

<script>

    function selectCountry(e) {

        // get data item
        var dataItem = this.dataItem(e.item.index());
        // throw it in the console (F12)
        kendo.logToConsole("event :: select (" + dataItem + ")");

    }

</script>

[Mithun Prasath]

i need an example for auto complete with database with jsp pls hekp me

[Alexander Popov]

Hi Mithun,

You can find such example here. I would also recommend checking this article, which describes how to install the KendoUI for JSP demos locally.

Kind regards,
Alexander Popov
the Telerik team

[Steve]

How are you supposed to get the data and id for a 'change' event?   If the user simply types into the AutoComplete and doesn't select from the dropdown list, then the same code for the select won't work for change.

[Alexander Popov]

Hi Steve,

The change event is triggered when an actual change in the values occurs. This could happen either when the user selects an item or when the value is changed programmatically through the API. Once the change event is triggered you can try to get the dataItem, if there is one matching the current value.

Regards,
Alexander Popov
Telerik

 

 

[Aravind]

Hi Alexander,

 Is it possible to get values of multiple values selected??

I tried

 

function onSelect(e) {                    
                            var dataItem = this.dataItem(e.item.index());
                            console.log("event :: select (" + dataItem + ")" );
                    } 

 

But I'm able to get the value of the one I've selected. Can you please provide an example on how to get value of multiple elements, if there is a coma separator in the kendoAutoComplete??

 

[Alexander Popov]

Hi,

The Autocomplete's value method returns a string, so getting the separate items is not supported. In that case it might be better to use the MultiSelect widget instead.

Regards,
Alexander Popov
Telerik

 

 

[Aravind]

Hi Alexander,

 

I changed to MultiSelect. But I'm not able to access the selected data as an array.

 

 

  var stackdata = [
            {text: "Android", value: 1},
            {text: "JavaScript", value: 2},
            {text: "iOS", value: 3},
            {text: "Java", value: 4},
            {text: "Hadoop", value: 5},
            {text: "R", value: 6},
            {text: "Power BI", value: 7},
            {text: "Spark", value: 8},
            {text: "Tableau", value: 9},
            {text: "J2EE", value: 10},
            {text: "ATG", value: 11},
            {text: "Kendo UI", value: 12}                            
        ];

 

 $(".stack").kendoMultiSelect({
            dataSource: stackdata,
            dataTextField: "text",
            dataValueField: "value",
            filter: "startswith",
            placeholder: "Select stack...",
            separator: ", ",
            select: onSelect,
           // dataBound: onDataBound
        });​

 

 $(".done").click(function(){

    var required = $(".stack").data("kendoMultiSelect");

    console.log(required.text);
        });​​

 

 

I am not getting the array of selected elements. (Also, my select tag uses a class{It is being used in other pages as well(Not the exact same thing, I should be able to select different stacks in different pages, and different values selected is to be returned on clicking an icon with class name "done")})

 

Can you please tell me how to access this as one single array comprising the text values(not the id number..).

 

Thanks.

[Alexander Popov]

Hello Aravind,

This can be done by setting the MultiSelect's dataValueField option to "text" as well, then call the value method. In case the value field should remain as-is, then you can use the dataItems method and manually construct the text array, as illustrated here.

Regards,
Alexander Popov
Telerik

 

 

[Rik]

To answer my own question, the correct solution is to use the ComboBox control, which exposes an ID value for each entry.

[David]

Is there a real solution to this? I'm coming across the same problem and a ComboBox is not a solution that we can use in our application.

[Georgi Krustev]

Hi,

 
Check this online demo, which shows how to get the selected dataItem on the client. If you need to retrieve the ID value, use the ComboBox widget.

All the best,
Georgi Krustev
the Telerik team

[Mark]

Hi Georgi,

Similar to other posts, I would like to be able to retrieve the ID value(s) with AutoComplete.

ComboBox doesn't work for our scenario since the user needs to be able to enter multiple values (,) separated. A good example of this is when typing possible names into the "To" field of an email client.

regarding the demo, I was unable to even pickup the 'just added' item from the change event - this would at least allow a workaround.

Any suggestions?

Thanks,

Mark.

[Georgi Krustev]

Hello Mark,

 
Here is a simple jsFiddle demo, which shows how to get last selected data item.

Greetings,
Georgi Krustev
the Telerik team

[Sakthivel]

Rik.... It is possible to get the selected item's id.... This should be handled at two different places. The first one is in the select event...

select: function (e) 
                { 
                    if (e.item == null) return;
                    var DataItem = this.dataItem(e.item.index());
                    $('#DivMessage').prepend('Name : ' + DataItem.name+ ', Id : ' + DataItem.id + '<br />');
                }

And, if you directly key-in the text without selecting a particular item from the list, and if that item indeed is present in the list, you can get the id of that keyed-in item as follows from any javascript function......

function BtnSubmitClientClick()
        {
            var KOImages = $("#TxtImages").data("kendoAutoComplete");
            var KOImagesData = KOImages.dataSource.data();
            var KOImagesSelectedValue = $.trim(KOImages.value());
            if ((KOImagesSelectedValue != '') && (KOImagesData != null))
            {
                var ArrImagesMatching = $.grep(KOImagesData, function(Item, Index)
                {
                    if($.trim(Item.name).toLowerCase() == KOImagesSelectedValue.toLowerCase()) return true;
                });
                if(ArrImagesMatching.length != 0)
                {
    $('#DivMessage').prepend('Name : ' + ArrImagesMatching[0] .name+ ', Id : ' + ArrImagesMatching[0] .id + '<br />'); 
                }
                else
                {   $('#DivMessage').prepend('Name : ' +  KOImagesSelectedValue; }
            }
            else
            {   $('#DivMessage').prepend('Name : ' +  KOImagesSelectedValue; } 

        }