AutoComplete does not highlight best match

5 posts, 0 answers
  1. Jon
    Jon avatar
    14 posts
    Member since:
    Sep 2009

    Posted 18 Sep 2014 Link to this post

    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..."
        });
    });




  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 19 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jon
    Jon avatar
    14 posts
    Member since:
    Sep 2009

    Posted 19 Sep 2014 in reply to Georgi Krustev Link to this post

    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.
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Jon
    Jon avatar
    14 posts
    Member since:
    Sep 2009

    Posted 24 Sep 2014 in reply to Atanas Korchev Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready