AutoComplete does not highlight best match

[Jon]

AutoComplete does not appear to highlight the best match for what the user types.

Here is a jsbin with an example: http://jsbin.com/kaqacoyiyuva/1/

In this example when a user types "meow" the highlighted item is "cats say meow" even though there is an item that exactly matches what is typed.

Is there anyway to better match what the user has typed so that the user doesn't have to scroll through the list to find the exact match? What do you think?

Thank you!

$(document).ready(function () {
    var data = [
            "cats say meow",
            "meow",
            "dogs don't say meow",
            "dogs say woof",
            "woof",
            "baa",
            "sheep say baa"
        ];

    //create AutoComplete UI component
    $("#animals").kendoAutoComplete({
      highlightFirst: true,
        dataSource: data,
        filter: "contains",
        placeholder: "Select..."
    });
});

[Georgi Krustev]

Hello Jon,

The highlightFirst option focuses the first item in the suggestion box. When contains filter is used the first match is "cats say meow" item. If you would like to focus based on startswith logic, then change the filter type of "startswith" value.

Regards,
Georgi Krustev
Telerik

 

 

[Jon]

I understand that behavior. Contains gives me the items I want to see in the drop down where startswith would not. However, I want exact matches to be listed and highlighted first. It appears that AutoComplete orders the matching items based on how they are returned by the DataSource.

I suppose it would work best if AutoComplete could combine both a startswith and a contains search listing startswith items first and contains items second.

[Atanas Korchev]

Hi Jonathan,

The autocomplete widget doesn't support the requested behavior. It can only have one filtering mode - contains or starts with. It uses the data source filter method to perform the actual filtering. The data source indeed filters the items and leaves them in the way they are sorted by default. 

Regards,
Atanas Korchev
Telerik

 

 

[Jon]

I've come up with a solution that appears to work well enough. On the datasource that the AutoComplete is using, I've implemented a custom transport read function that returns the items with a custom sort. I sort the items by length first and then alphabetically. This will put the shorter words first causing exact matches to be at the top.

So far so good!