Solving Limitations with the Kendo AutoComplete Control

The Kendo AutoComplete control provides a great user interface for type ahead functionality. It works seamlessly with bound JSON data from an AJAX data source and provides a tidy, yet customizable, view of the data. Some of the functionality of the behavior is customizable, and it exposes a decent set of events. You can view the demo of the control here.

Even though the control has a decent number of features, the API is still really lax in offering you specific information that was selected. Even though you may have sent an array of JSON object with 20 properties, you can only access the selected value (please vote for my request to change that behavior). However, there is a way to work around that limitation, which is to create a custom template. The autocomplete control has a template attribute that takes a string for the UI to use as each data item. Internally in this template, the “data” object refers to the data source bound to this template, and is a way to display multiple properties of data in the same line item.

Let’s briefly look at the Kendo AutoComplete basic configuration, which is the following. (Note that this article expects you to have a familarity with the control; I won’t be going over it in detail here.)

   placeholder: 'Name Search',
   delay: 500,
   dataTextField: 'Name',
   dataValueField: 'ID',
   filter: 'contains',
   minLength: 3,
   dataSource: ..

Out of the box, this auto complete wires up to a data source, matching a Name as the text and ID as the value. The kendo datasource ties the control to the backend data store (an example for another time). Now suppose you had this JSON:

{ "ID": 1, "Name": "Ted", "Address": "101 Test Rd", "Phone": "555-555-5555", "Email": "" },
{ "ID": 2, "Name": "Bob", "Address": "21 Other Rd", "Phone": "567-555-5555", "Email": "" }

When the type ahead behavior occurs, after typing 3 characters, the control sends back a request with the current text and displays the response in the dropdown. But it only shows the value in the Name property (“Ted”, “Bob”).

This is where the template property comes into play

   '<div class="item" data-address="#:data.Address#" data-phone="#:data.Phone#" data-email="#:data.Email#">' +
   '<div><strong>#:data.Name#</strong><div>' +
   '# if (data.Address != null) { # <div>#:data.Address#</div> # } #' +
   '<div>#:data.Phone#, #:data.Email#</div>' +
   dataSource: ..

With the template property, this provides a custom UI to the user. You can see the “data” object reference; this is the actual underlying JSON data at execution time. Templates work great but we still have the unfortunate problem of not being able to access the “Address”, “Phone”, or “Email” attributes of the JSON object outside of displaying in the list. This is where the data attributes on the root DIV come into play. Using those attributes, we can extract them out from the selected item during the select event:

select: function (e) {
   var $item = e.item.find("div.item");

On select, e.item refers to the HTML representing the current item. Finding the DIV wrapper we have our data attributes on, the data can be extracted and pushed somewhere. In this case the fields are populated into an edit form.

Hopefully this was a good overview as a means to grab additional useful, meaningful information that I could not find available anywhere else in the Kendo AutoComplete control API. Using this technique, we can gain additional meaningful information to populate another portion of the UI when something changes.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s