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>
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?
$('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;
}
<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?