Autocomplete with multiple dataTextField

[Gaetano]

Hello,
I need to set a multiple dataTextField property on an autocomplete, because I need the suggestion only on certain properties of the objects contained in the datasource.
I've seen that the dataTextField property accept only a string and not an array of strings.
There is another property to obtain what i need? Or a workaround?

Thanks a lot.
Fabio

[Georgi Krustev]

Hello Fabio,

 
Currently, the widget is designed to filter only by dataTextField property. You can accomplish your task, if you use server filtering and filter the data on the server by multiple fields.

Regards,
Georgi Krustev
Telerik

[Jeffrey]

Here is my solution.  You can add a new property which contains values from multiple properties, like the textForSearch property in below:

function codePage(code, name) {
  this.codePage= code;
  this.name = name;
  this.textForSearch = code + " " + name;
}
var data = [
  new codePage("869", "Greek"),
  new codePage("932", "Japanese"),
  new codePage("936", "Simplified Chinese"),
  new codePage("949", "Korea"),
  new codePage("950", "Traditional Chinese")
];

When using kendoAutoComplete, set dataTextField = "textForSearch" and filter = "contains", then you can search multiple fields.
But there is one problem, when suggestion selected from the list, the ugly combined textForSearch property will be filled in the <input>,  that is not what we want user to see.

To solve this problem, a good way is to add one more parameter, dataValueField, to assign which property should be filled in the input element.  It's easy to implement by modifying kendoAutoComplete._select function: (only one line modified, check the comment)

var that = this,
    separator = that.options.separator,
    data = that._data(),
    text,
    idx;

li = $(li);

if (li[0] && !li.hasClass(SELECTED)) {

    idx = List.inArray(li[0], that.ul[0]);

    if (idx > -1) {
        data = data[idx];
        //if dataValueField provided, use _value
        text = that.options.dataValueField ? that._value(data) :
               that._text(data);

        if (separator) {
            text = replaceWordAtCaret(caretPosition(that.element[0]), that._accessor(), text, separator);
        }

        that._accessor(text);
        that.current(li.addClass(SELECTED));
    }
}

I hope Telerik team can consider adding the "dataValueField" feature, before that, you can *PATCH* the kendoAutoComplete._select like me as a workaround.  [Demo (JSBin)]
 

[Petyo]

Hello Fabio,

Thank you very much for your suggestion. We will look into it further and consider it in our future releases. 

Regards,
Petyo
Telerik

[Luc]

Jeffrey, 

Thank your for your suggestion!

Luc

[Josh]

I am having the same issue with my application.  Jeffrey's solution worked but we cannot use this as a permanent solution because the changes to the kendo JS file will be overwritten with the next release.  We need this functionality for our application to work correctly, can you add it to the next release? 

[Georgi Krustev]

Hello Josh,

 
As my collegue mentioned in his last reply, the suggested functionality is still under consideration and we will not be able to implement it for the next official release. We will need to gather more information from the community about it. The best way to do that is to open a uservoice discussion. Thus more people can cast their vote for it.

Regards,
Georgi Krustev
Telerik

[Steve]

This works awesomely with Kendo version 2014.1.416 too!