Post
Ask Question

Using Kendo UI AutoComplete

Introduction

There is a scenario in which we need to use the AutoComplete feature in the ASP.NET Web Application. Now it depends on what is the easy way to use this AutoComplete feature in the web application.

There are the following two ways with which we can implement the AutoComplete feature:

  • Kendo UI
  • jQuery UI

Now in this article, I am creating the web application and we will use the Kendo UI AutoComplete feature in the application.

Overview

In the AutoComplete feature, when we type some text into it, it gives some hints depending upon the text. It provides suggestions depending upon the typed text. It also allows multiple-value entries.

Now the source of the suggested data shown by the AutoComplete can come from multiple sources such as through a remote web service, through any array or so on.

Note: The Kendo UI AutoComplete should be created from the HTML element such as input.

Here, in this article we'll create an application and work with the Kendo UI. So, let's start the application using the following procedure:

  • Creating Web Application
  • Installing Kendo UI
  • Running Application

Creating Web Application

In this section, we'll create the ASP.NET Web Application in Visual Studio 2013. Begin with the following procedure:

Step 1: Open Visual Studio 2013 and click on "New Project".

Step 2: Select ASP.NET Web Application and enter the name for it.

Creating Web Application in VS 2013

Step 3: Select the Empty Project Template for the application.

Empty Project Template in VS 2013

Visual Studio creates the empty application.

Step 4: Now, add the the New Folder named "Scripts" and add a JavaScript file named "Demo".

Adding New Folder in Application

Step 5: Add a New HTML page in the application.

Adding HTML Page in Application

Installing Kendo UI

In this section, we'll add the reference of the Kendo UI to the application. Use the following procedure.

Step 1: In Solution Explorer, just right-click on the project and click on the Manage NuGet Packages.

Managing NuGet Package

Step 2: Search for Kendo in the wizard and install it.

Installing Telerik Kendo

Now the Kendo UI is installed in the application and you can find it in the Scripts folder.

Working with Kendo UI

Now in this section, we'll work with the Kendo UI using the following procedure.

Step 1: Update the HTML page code using the following code:

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Welcome to Kendo Appliction</title>  
  5.     <link href="Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />  
  6.     <link href="Content/kendo/2014.1.318/kendo.default.min.css" rel="stylesheet" />  
  7.     <script src="Scripts/kendo/2014.1.318/jquery.min.js"></script>  
  8.     <script src="Scripts/kendo/2014.1.318/kendo.web.min.js"></script>  
  9.     <script src="Scripts/Demo.js"></script>  
  10. </head>  
  11. <body>  
  12.     <div id="Content">  
  13.         <input id="Country" />  
  14.     </div>  
  15. </body>  
  16. </html>  

 In the code above, there are some references that have been added to the HTML page and as well as the newly created JavaScript file reference is also added.

Step 2: In the JavaScript file, paste the following code:

  1. /// <reference path="kendo/2014.1.318/jquery.min.js" />  
  2. /// <reference path="kendo/2014.1.318/kendo.web.min.js" />  
  3.    
  4. $(document).ready((function () {  
  5.    
  6.     var CountryList = [  
  7.         "America",  
  8.         "Australia",  
  9.         "China",  
  10.         "India",  
  11.         "Pakistan"  
  12.     ];  
  13.    
  14.     $("#Country").kendoAutoComplete({  
  15.         dataSource: CountryList,  
  16.         filter: "startswith",  
  17.         placeholder: "Select Country",  
  18.         seperator: ","  
  19.     });  
  20. }));  

In the code above, we have created an array in which various countries are added manually. We can also use the remote web service here to fetch the data from the database. In the next part, the kendoAutoComplete feature is called to show the data source (CountryList) and the data is filtered as a startswith. startswith in other words that whenever the key is pressed and if that specific text is matched with the data then the suggestions are displayed by the AutoComplete feature. The placeholder is used to show in the input element.

That's it.

Running Application

In this section, we run the application.

Step 1: Run the HTML page and in the input element type any country name starting with "I".

Input Element on Browser

Step 2: As you can see the AutoComplete wizard shows the suggesstions for the typed text "I".

AutoComplete Wizard on Browser

Summary

This article described the use of the Kendo UI AutoComplete wizard in the web application in ASP.NET. You can create some more enhancements to work the wizard. Thanks for reading.


Similar Articles