Post
Ask Question

AutoComplete Widget In Kendo UI

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. 


Similar Articles