JQuery

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. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs