The Autocomplete widget of Kendo UI

Have you ever observed that as soon as you start typing in google search textbox, you start getting suggestions, sometimes we don't know what to search exactly but autosuggestions help us and we often get the desired results. Such textboxes with suggestions are called AutoComplete, means complete something automatically, now the criteria of suggestions could be anything like suggesting all related words from the server which starts with the letter that is typed by the user, or giving suggestions of all related sentence which contains the word typed in the textbox. If we will create an Autocomplete TextBox by ourself then we will end up writing huge javascript and server-side code for bindings but Kendo UI provides us a built-in Autocomplete widget that is easily configurable. The Autocomplete Kendo UI widget becomes accessible as a normal Html helper Once you import the namespace Kendo.Mvc.UI in razor view. The AutoComplete provides suggestions depending on the typed text and allows multiple value entries.

Bind AutoComplete with server-side data

The following example demonstrates the basic configuration of the AutoComplete HtmlHelper.

Step 1. Create two Action methods in the controller , one which expose a List of data in JSON format and one which returns a view.

    public class HomeController: Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public ActionResult GetAllBooks(string text)
        {
            List<Book> bookList = new List<Book>(){
            new Book(){ISBN="AB23",AuthorId=1,Title="Journey to Iceland",Price=2000},
          new Book(){ISBN="AB24",AuthorId=1,Title="Learn c# in one day",Price=780},
           new Book(){ISBN="AB25",AuthorId=2,Title="The ghost Story",Price=890},
            new Book(){ISBN="AB26",AuthorId=2,Title="How to cook food",Price=1000},
          new Book(){ISBN="AB27",AuthorId=3,Title="Learn SQL in 24 hours",Price=2000},
           new Book(){ISBN="AB28",AuthorId=3,Title="How to be happy",Price=4500},
            };

            if (!string.IsNullOrEmpty(text))
            {
                bookList = bookList.Where(p => p.Title.ToLower().Contains(text.ToLower())).ToList();
            }

            return Json(bookList, JsonRequestBehavior.AllowGet);
        }        
    }

Step 2. Configure the options like DataSource (action name, controller name) , FilterType (contains/Startswith), MinLength and Data which accepts a JavaScript function as shown below.

 @using Kendo.Mvc.UI
 @(Html.Kendo().AutoComplete()
        .Name("Books")
            .DataTextField("Title")
        .Filter(FilterType.Contains)
        .MinLength(3)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetAllBooks", "Home")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(true);
        })
        
        })
  )

  <script type="text/javascript">
    function onAdditionalData() {
        return {
            text: $("#autocomplete").val()
        };
    }
 </script>

Events

We can easily subscribe to the Autocomplete events. Follow the example shown below to subscribe to event with event handler

 @using Kendo.Mvc.UI
 @(Html.Kendo().AutoComplete()
        .Name("Books")
            .DataTextField("Title")
        .Filter(FilterType.Contains)
        .MinLength(3)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetAllBooks", "Home")
                    .Data("onAdditionalData");
            })
            .ServerFiltering(true);
        }).Events(e=>{e.Change("books_Change");
        e.Select("book_Select");      
        })
   )

 <script type="text/javascript">
    function onAdditionalData() {
        return {
            text: $("#Books").val()
        };
    }

    function books_Change() {
       // handle event
    }
    function book_Select() {
        // handle event
    }
 </script>