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 {
2:
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: }
5:
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>
17:
18: <h2>@ViewBag.Title</h2>
19:
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:
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;
6:
7: namespace Part2_AutoComplete.Web.Controllers {
8:
9: public class HomeController : Controller {
10:
11: [HttpGet]
12: public ActionResult Index() {
13: return View(new Manufacturer{Id = 1, Name = "Aston Martin"});
14: }
15:
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: }
21:
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: }
29:
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!
Remember Me
a@href@title, strike
Keith Burnell is a Microsoft web MVP and Senior Software Engineer with Skyline Technologies and president of the Fox Valley .Net User Group. Keith has been developing software for over 10 years specializing in large scale ASP.NET and ASP.NET MVC web site development and architecture (more...)
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.