Premium forums

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

• Rik

  
  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?

• Rik

  
  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.
• David

  
  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.
• Georgi Krustev

  
  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!
• Mark

  
  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.
  
  
• Georgi Krustev

  
  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!
• Sakthivel

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

  
  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.
• PaulMrozowski

  
  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.