AutoComplete Widget In Kendo UI

In this article you will learn how to implement the AutoComplete widget in Kendo UI and how to handle it's event.

To explain how to work with AutoComplete widget in Kendo UI, I’m going to use the following API which I have created from my previous article,

            1. api/department

GET: api/department response as shown in figure 1,



Create an HTML page in your project, in my case I named it KendoAutoComplete.html.

Design in KendoAutoComplete.html 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div id="example">  
  16.         <input data-role="autocomplete"  
  17. data-placeholder="Department"                 
  18.                data-text-field="DepartmentName"  
  19.                data-bind="value: selectedProduct,  
  20.                               source: products,  
  21.                               visible: isVisible,  
  22.                               enabled: isEnabled"  
  23.                style="width: 100%;" />  
  24.         </div>  
  25. </body>  
  26. </html>  

JavaScript

  1. $(document).ready(function () {  
  2.   
  3.           var viewModel = kendo.observable({  
  4.               selectedProduct: null,  
  5.               isVisible: true,  
  6.               isEnabled: true,  
  7.               products: new kendo.data.DataSource({  
  8.                   transport: {  
  9.                       read: {  
  10.                           url: "api/Departments" 
  11.                           dataType: "json"  
  12.                       }  
  13.                   }  
  14.               })  
  15.           })  
  16.           kendo.bind($("#example"), viewModel);  
  17.           })  
 Result in Browser

 

Events in Kendo Autocomplete widget

The main events in Kendo Autocomplete widget is listed below:

  1. Databound
  2. Change
  3. Open
  4. Close
  5. Select 

      Databound: This event is fired when the kendo Autocomplete is bound to data from its data source.

HTML

  1. <input data-role="autocomplete"  
  2.                data-placeholder="Department"  
  3.                  
  4.                data-text-field="DepartmentName"  
  5.                data-bind="value: selectedProduct,  
  6.                               source: products,  
  7.                               visible: isVisible,  
  8.                               enabled: isEnabled,events:{dataBound:AutoComplete_Bound}"  
  9.                style="width: 100%;" />  

JavaScript

  1. AutoComplete_Bound:function(e)  
  2.                 {  
  3.                     e.preventDefault();  
  4.                     alert("DataBaound")  
  5.   
  6.             },  

Result in Browser



Change Event: 
This event in Kendo AutoComplete is fired when the value of the widget is changed by user.

HTML Design 
  1. <input data-role="autocomplete"  
  2.          data-placeholder="Department"  
  3.            
  4.          data-text-field="DepartmentName"  
  5.          data-bind="value: selectedProduct,  
  6.                         source: products,  
  7.                         visible: isVisible,  
  8.                         enabled: isEnabled,events:{change:AutoComplete_Change}"  
  9.          style="width: 100%;" />  

JavaScript

  1. AutoComplete_Change:function(e)  
  2.                 {  
  3.                     e.preventDefault();  
  4.                     alert("Change Event")  
  5.                 },  
 Result in Browser
 


Open Event: This event is fired when the items in the widget is opened.

HTML

  1. <input data-role="autocomplete"  
  2.                data-placeholder="Department"  
  3.                  
  4.                data-text-field="DepartmentName"  
  5.                data-bind="value: selectedProduct,  
  6.                               source: products,  
  7.                               visible: isVisible,  
  8.                               enabled: isEnabled,events:{open:AutoComplete_Open}"  
  9.                style="width: 100%;" />  

JavaScript

  1. AutoComplete_Open:function(e)  
  2.                 {  
  3.                     e.preventDefault();  
  4.                     alert("Open Event")  
  5.                 },  
Result in Browser
 


Close Event: This event is fired when the items in the widget is closed.

HTML

  1. <input data-role="autocomplete"  
  2.                data-placeholder="Department"  
  3.                  
  4.                data-text-field="DepartmentName"  
  5.                data-bind="value: selectedProduct,  
  6.                               source: products,  
  7.                               visible: isVisible,  
  8.                               enabled: isEnabled,events:{close:AutoComplete_Close}"  
  9.                style="width: 100%;" />  

JavaScript

  1. AutoComplete_Close:function(e)  
  2.                 {  
  3.                     e.preventDefault();  
  4.                     alert("Close Event")  
  5.                 },  

Result in Browser

 
Select Event: This event is fired when an item from the AutoComplete box is selected by the user.

HTML
  1. <input id="AutoFill_ID" data-role="autocomplete"  
  2.                data-placeholder="Department"  
  3.                data-selectable="true"  
  4.                  
  5.                data-text-field="DepartmentName"  
  6.                data-bind="value: selectedProduct,  
  7.                               source: products,  
  8.                               visible: isVisible,  
  9.                               enabled: isEnabled,events:{select:AutoComplete_Select}"  
  10.                style="width: 100%;" />  

JavaScript

  1. AutoComplete_Select:function(e)  
  2.                 {  
  3.                     var item = e.sender.dataItem(e.item.index());  
  4.                     viewModel.set("selectedPerson", item);  
  5.                     alert(item.DepartmentName);  
  6.                 },  

Result in Browser

 
Here is the complete code: 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div id="example">  
  16.         <input id="AutoFill_ID" data-role="autocomplete"  
  17.                data-placeholder="Department"  
  18.                data-selectable="true"  
  19.                  
  20.                data-text-field="DepartmentName"  
  21.                data-bind="value: selectedProduct,  
  22.                               source: products,  
  23.                               visible: isVisible,  
  24.                               enabled: isEnabled,events:{dataBound:AutoComplete_Bound,change:AutoComplete_Change,  
  25.                open:AutoComplete_Open,close:AutoComplete_Close,select:AutoComplete_Select}"  
  26.                style="width: 100%;" />  
  27.         </div>  
  28.     <script>  
  29.         $(document).ready(function () {  
  30.   
  31.             var viewModel = kendo.observable({  
  32.                 selectedProduct: null,  
  33.                 isVisible: true,  
  34.                 isEnabled: true,  
  35.                 selectedPerson: {},  
  36.                 AutoComplete_Select:function(e)  
  37.                 {  
  38.                     var item = e.sender.dataItem(e.item.index());  
  39.                     viewModel.set("selectedPerson", item);  
  40.                     alert(item.DepartmentName);  
  41.                 },  
  42.                 AutoComplete_Bound:function(e)  
  43.                 {  
  44.                     e.preventDefault();  
  45.                     alert("DataBaound")  
  46.   
  47.                 },  
  48.                 AutoComplete_Change:function(e)  
  49.                 {  
  50.                     e.preventDefault();  
  51.                     alert("Change Event")  
  52.                 },  
  53.                 AutoComplete_Open:function(e)  
  54.                 {  
  55.                     e.preventDefault();  
  56.                     alert("Open Event")  
  57.                 },  
  58.                 AutoComplete_Close:function(e)  
  59.                 {  
  60.                     e.preventDefault();  
  61.                     alert("Close Event")  
  62.                 },  
  63.                 products: new kendo.data.DataSource({  
  64.                     transport: {  
  65.                         read: {  
  66.                             url: "api/Departments",  
  67.                             dataType: "json"  
  68.                         }  
  69.                     }  
  70.                 })  
  71.             })  
  72.             kendo.bind($("#example"), viewModel);  
  73.             })  
  74.     </script>  
  75. </body>  
  76. </html>  
I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.