Post
Ask Question

Get Selected Item Value from Kendo AutoComplete Widget

 Here is the Html code to get the  selected item value from Kendo AutoComplete widget: 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="example">  
  19.         <input id="AutoFill_ID" data-role="autocomplete"  
  20.                data-placeholder="Department"  
  21.                data-selectable="true"  
  22.                data-text-field="name"  
  23.                data-bind="value: selectedProduct,  
  24.                               source: DepartmentSource,  
  25.                               visible: isVisible,  
  26.                               enabled: isEnabled,events:{select:AutoComplete_Select}"  
  27.                style="width: 100%;" />  
  28.     </div>  
  29.     <script>  
  30.         $(document).ready(function () {  
  31.             var department = [  
  32.         { name: 'HR', id: 1 },  
  33.         { name: 'Infrastructure', id: 2 },  
  34.         { name: 'Testing', id: 3 }  
  35.   
  36.             ];  
  37.   
  38.             var viewModel = kendo.observable({  
  39.                 DepartmentSource: new kendo.data.DataSource({  
  40.                     data: department  
  41.                 }),  
  42.                 selectedProduct: null,  
  43.                 isVisible: true,  
  44.                 isEnabled: true,  
  45.                 selectedPerson: {},  
  46.                 AutoComplete_Select: function (e) {  
  47.                     var item = e.sender.dataItem(e.item.index());  
  48.                     viewModel.set("selectedPerson", item);  
  49.                     alert(item.name);//get the department name  
  50.                 },  
  51.             })  
  52.             kendo.bind($("#example"), viewModel);  
  53.         })  
  54.   
  55.     </script>  
  56. </body>  
  57. </html>