# Monday, May 21, 2012

Continuing from my previous post Getting Started with Kendo UI in ASP.NET MVC, let’s dive in to Kendo UI’s AutoComplete control.  The Kendo UI AutoComplete control is a text box that has an associated list of items that when text is entered into it a suggestion list is displayed allowing the user to select an item.

To get started I created a blank MVC project and wired up Kendo UI per the instructions in my Getting Started post.

Next I created a server side model: Manufacturer.cs

   1: namespace Part2_AutoComplete.Web.Models {
   3:     public class Manufacturer {
   4:         public int Id { get; set; }
   5:         public string Name { get; set; }
   6:     }
   7: }

As you can see the view the model is a very simple class that contains only an Id and a Name field.

After that I created my view: Index.cshtml

   1: @model Part2_AutoComplete.Web.Models.Manufacturer
   2: @{
   3:     ViewBag.Title = "Getting Started With KendoUI - Part 2: Auto Complete";
   4: }
   6: <script type="text/javascript">
   7:     $(document).ready(function () {
   8:         $("#Name").kendoAutoComplete({
   9:             minLength: 1,
  10:             dataTextField: "Name",
  11:             suggest: true,
  12:             filter: "startswith",
  13:             dataSource: { serverFiltering: true,  transport: {read: {url: "/Home/GetManufacturers/",dataType: "json", type: "POST"}}}
  14:         });
  15:     });
  16: </script>
  18: <h2>@ViewBag.Title</h2>
  20: @using(Html.BeginForm()) {
  21:     <div id="root">
  22:         <div id="manufacturers">
  23:             @Html.HiddenFor(x => x.Id)
  24:             <label for="input" class="info">Choose a car manufacturer:</label>
  25:             @Html.TextBoxFor(m => m.Name)
  26:             <div class="hint">Start typing the name of a car manufacturer <br/>(Aston Martin, Bugatti, Ferrari, Lamborghini, Porsche) </div>
  27:         </div>
  28:     </div>
  29:     <input type="submit" value="Send Back To Server"/>
  30:     <h3>@ViewBag.Message</h3>
  31: }

Assuming you are an ASP.NET MVC developer that uses Razor, the majority of the view code above should look familiar.  The lines to focus on are 8 – 14, which are the actual implementation of the Kendo UI AutoComplete.  Let’s break down the configuration options that I am passing to kendoAutoComplete:

  • minLength:  number of characters to be entered before filtering the data
  • dataTextField: field in the data source that represents the content of the list items
  • suggest: controls if the rest of the text for the item that matches is automatically displayed in the text box
  • filter: type of filtering to apply the data (“startswith”, “contains”, etc.)
  • dataSource: data that the control is bound to, can either be a JavaScript object or a Kendo UI DataSource
    • As you can see I am using a Kendo UI DataSource that makes an AJAX call to the GetManufactures method on the Home controller.

That is the complete client side implementation of the Kendo UI AutoComplete.  More details on what configuration is available for the AutoComplete can be found here.

Lastly we can code our controller: HomeController.cs

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web.Mvc;
   5: using Part2_AutoComplete.Web.Models;
   7: namespace Part2_AutoComplete.Web.Controllers {
   9:     public class HomeController : Controller {
  11:         [HttpGet]
  12:         public ActionResult Index() {
  13:             return View(new Manufacturer{Id = 1, Name = "Aston Martin"});
  14:         }
  16:         [HttpPost]
  17:         public ActionResult Index(Manufacturer manufacturer) {
  18:             ViewBag.Message = string.Format("You selected \"{0}\" and sent it to the server!", manufacturer.Name);
  19:             return View();
  20:         }
  22:         [HttpPost]
  23:         public JsonResult GetManufacturers() {
  24:             string searchValue = Request.Params["filter[filters][0][value]"];
  25:             IList<Manufacturer> manufacturers = BuildManufacturersList()
  26:                 .Where(x => x.Name.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase)).ToList();
  27:             return Json(manufacturers);
  28:         }
  30:         private IList<Manufacturer> BuildManufacturersList() {
  31:             IList<Manufacturer> manufacturers = new List<Manufacturer>();
  32:             manufacturers.Add(new Manufacturer {Id = 1, Name = "Aston Martin"});
  33:             manufacturers.Add(new Manufacturer {Id = 2, Name = "Audi"});
  34:             manufacturers.Add(new Manufacturer {Id = 3, Name = "Buggati"});
  35:             manufacturers.Add(new Manufacturer {Id = 4, Name = "BMW"});
  36:             manufacturers.Add(new Manufacturer {Id = 5, Name = "Chevrolet"});
  37:             manufacturers.Add(new Manufacturer {Id = 6, Name = "Ferrari"});
  38:             manufacturers.Add(new Manufacturer {Id = 7, Name = "Ford"});
  39:             manufacturers.Add(new Manufacturer {Id = 8, Name = "Lamborghini"});
  40:             manufacturers.Add(new Manufacturer {Id = 9, Name = "Mazda"});
  41:             manufacturers.Add(new Manufacturer {Id = 10, Name = "McLaren"});
  42:             manufacturers.Add(new Manufacturer {Id = 11, Name = "Mercedes Benz"});
  43:             manufacturers.Add(new Manufacturer {Id = 12, Name = "Porsche"});
  44:             return manufacturers;
  45:         } 
  46:     }
  47: }

The controller code is very straightforward.  Notice the GetManufacturers method that starts on line 30, it handles the AJAX request from the client and returns the JSON that is used to build the Kendo UI DataSource that drives that Kendo UI AutoComplete.

The code is available on GitHub.

If you haven’t checked out the recently released GitHub for Windows client, I highly suggest you check it out!

Wednesday, June 27, 2012 9:37:29 AM (Central Daylight Time, UTC-05:00)
J'ai particulièrement aimé votre blog, alors je laisse un texte sur votre guest book pour vous féliciter et vous souhaiter de bien continuer avec ce beau site que vous avez construit
Wednesday, October 03, 2012 1:52:47 PM (Central Daylight Time, UTC-05:00)
Du beau boulot ! J'ai suivi le tuto pas à pas et je suis arrivé exactement au resultat souhaité, un grand merci pour avoir pris le temps de nous l'expliquer en détails !

Gill, mon site : Gagner voiture
Wednesday, February 27, 2013 6:41:43 AM (Central Standard Time, UTC-06:00)
Un peu compliqué pour moi mais j'ai fini par m'en sortir ! Merci beaucoup pour ce tutoriel complet qui m'a permis d'achever mon site <a href="Un peu compliqué pour moi mais j'ai fini par m'en sortir ! Merci beaucoup pour ce tutoriel complet qui m'a permis d'achever mon site reponsactu.com
Thursday, May 02, 2013 11:57:21 AM (Central Daylight Time, UTC-05:00)
Freaking hard, but with all your explanation I made it ! Thanks a lot for making these instructions, without them I wouldn't have do it !
Thursday, October 02, 2014 11:22:47 AM (Central Daylight Time, UTC-05:00)
I wish Telerik would put good examples like this in their online documentation!!!
Thursday, December 21, 2017 12:39:01 PM (Central Standard Time, UTC-06:00)
I have checked your page and i've found some duplicate content, that's why
you don't rank high in google, but there is a tool
that can help you to create 100% unique content,
search for; Boorfe's tips unlimited content
Tuesday, February 13, 2018 2:21:19 PM (Central Standard Time, UTC-06:00)
Grat content my friend, keep updating your site
Friday, March 16, 2018 7:55:21 AM (Central Standard Time, UTC-06:00)
I have checked your site and i've found some duplicate content, that's why you don't rank high in google's
search results, but there is a tool that can help
you to create 100% unique articles, search for: boorfe's tips unlimited
Sunday, May 13, 2018 7:50:28 AM (Central Daylight Time, UTC-05:00)
I have checked your site and i've found some duplicate content, that's why
you don't rank high in google, but there is a tool that can help you to create 100% unique content, search for: SSundee
advices unlimited content for your blog
Friday, November 02, 2018 8:25:38 AM (Central Standard Time, UTC-06:00)
СТО в Абакане

Мы предлагаем высокое качество сервиса.

Технический осмотр легкового транспорта.

У нас Вы получите полный комплекс услуг!

Мы бережем ваше время.

Вам не нужно будет терять свое время на починку дефектов, таких как замена жидкостей, либо настройка
ходовой части и многое другое, все услуги по направлению вы сможете получить у нас при
<img src="https://d.radikal.ru/d20/1810/3a/e8ee988b208b.jpg">

Wednesday, March 06, 2019 7:27:46 PM (Central Standard Time, UTC-06:00)
тут изометрия в autocad.
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview