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

19 posts, 0 answers
  1. Rik
    Rik avatar
    5 posts
    Member since:
    Apr 2012

    Posted 20 Apr 2012 Link to this post

    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?
  2. Rik
    Rik avatar
    5 posts
    Member since:
    Apr 2012

    Posted 23 Apr 2012 Link to this post

    To answer my own question, the correct solution is to use the ComboBox control, which exposes an ID value for each entry.
  3. David
    David avatar
    7 posts
    Member since:
    Mar 2012

    Posted 24 Apr 2012 Link to this post

    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.
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3725 posts

    Posted 11 Jun 2012 Link to this post

    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!
  5. Mark
    Mark avatar
    16 posts
    Member since:
    Apr 2012

    Posted 19 Jun 2012 Link to this post

    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.

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3725 posts

    Posted 22 Jun 2012 Link to this post

    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!
  7. Sakthivel
    Sakthivel avatar
    6 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

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

            }
  8. Jahn
    Jahn avatar
    2 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2012 Link to this post

    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.
  9. PaulMrozowski
    PaulMrozowski avatar
    80 posts
    Member since:
    Apr 2007

    Posted 16 Jul 2012 Link to this post

    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.
  10. Eric
    Eric avatar
    57 posts
    Member since:
    Aug 2012

    Posted 23 Oct 2013 Link to this post

    Can you please give an example using the wrapper classes?
  11. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 25 Oct 2013 Link to this post

    @(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>
  12. Mithun Prasath
    Mithun Prasath avatar
    5 posts
    Member since:
    Nov 2013

    Posted 25 Nov 2013 Link to this post

    i need an example for auto complete with database with jsp pls hekp me
  13. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 28 Nov 2013 Link to this post

    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!
  14. Steve
    Steve avatar
    13 posts
    Member since:
    Sep 2014

    Posted 12 Nov 2014 in reply to PaulMrozowski Link to this post

    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.
  15. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 17 Nov 2014 Link to this post

    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!
     
  16. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 12 Nov 2015 in reply to Alexander Popov Link to this post

    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??

     

  17. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 17 Nov 2015 Link to this post

    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!
     
  18. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 17 Nov 2015 in reply to Alexander Popov Link to this post

    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.

  19. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 20 Nov 2015 Link to this post

    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!
     
Back to Top