Selecting an autocomplete element does not change the css of previously selected elements

[TRA]

I have set a delegated event handler to fire on a mouseenter of each of the autocomplete listbox items (the popup list). This handler will then call the autocomplete.select() on the target <li>

    $('ul[id^=txtVendor]').on('mouseenter','li',function (e) { SFO_CNew.autoCompleteMouseEnter(e); });

 

SFO_CNew.autoCompleteMouseEnter = function (e) {

    var autocompleteId, autocomplete;

    autocompleteId = $(e.target).parent().prop('id').replace('_listbox', '');

    autocomplete = $('#' + autocompleteId).data('kendoAutoComplete');

    autocomplete.select(e.target);

    return;

}



The select method will set the target as such:
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="txtVendor_option_selected">XXXXXXX</li>

However it does not reset the class list on previously selected <li> items for example:
<li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected">ZZZZZZZ</li>

By not removing the k-state-selected class, I see the k-state-selected background's color which I don't want. While I could use jQuery to reset all of the <ul>'s <li> classes to just k-item, before I select an item, I would expect that the select() method would do this for me.  Is there something I am missing?

[Alexander Popov]

Hello Lance,

Not removing the k-state-selected class is the expected behavior of the select method - after all the class was added to differentiate the already selected items from the rest.
I would recommend you to add a handler to the li elements' mouseout event that removes the said class, for example:  

$('ul[id^=txtVendor]').on('mouseout','li',function (e) {
    $(e.target).removeClass("k-state-selected");
});

 

Regards,
Alexander Popov
Telerik