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

2 Answers 4994 Views
AutoComplete
Rik
Top achievements
Rank 1
Rik asked on 20 Apr 2012, 05:25 PM
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
Top achievements
Rank 1
commented on 09 Jul 2012, 05:39 PM

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
Top achievements
Rank 1
commented on 17 Jul 2012, 01:19 AM

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
Top achievements
Rank 1
commented on 23 Oct 2013, 08:45 PM

Can you please give an example using the wrapper classes?
Burke
Top achievements
Rank 1
commented on 25 Oct 2013, 02:14 PM

@(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
Top achievements
Rank 1
commented on 26 Nov 2013, 05:14 AM

i need an example for auto complete with database with jsp pls hekp me
Alexander Popov
Telerik team
commented on 28 Nov 2013, 01:13 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Steve
Top achievements
Rank 1
commented on 12 Nov 2014, 06:54 PM

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
Telerik team
commented on 17 Nov 2014, 10:21 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Aravind
Top achievements
Rank 1
commented on 12 Nov 2015, 12:47 PM

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
Telerik team
commented on 17 Nov 2015, 11:25 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Aravind
Top achievements
Rank 1
commented on 17 Nov 2015, 11:36 AM

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
Telerik team
commented on 20 Nov 2015, 09:43 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

2 Answers, 1 is accepted

Sort by
0
Rik
Top achievements
Rank 1
answered on 23 Apr 2012, 03:09 PM
To answer my own question, the correct solution is to use the ComboBox control, which exposes an ID value for each entry.
David
Top achievements
Rank 1
commented on 24 Apr 2012, 04:35 PM

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
Telerik team
commented on 11 Jun 2012, 12:27 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Mark
Top achievements
Rank 1
commented on 19 Jun 2012, 02:56 PM

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
Telerik team
commented on 22 Jun 2012, 08:18 AM

Hello Mark,

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

Greetings,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sakthivel
Top achievements
Rank 1
answered on 22 Jun 2012, 03:29 PM
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; } 

        }
Tags
AutoComplete
Asked by
Rik
Top achievements
Rank 1
Answers by
Rik
Top achievements
Rank 1
Sakthivel
Top achievements
Rank 1
Share this question
or