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

2 posts, 0 answers
  1. TRA
    TRA avatar
    7 posts
    Member since:
    Aug 2008

    Posted 23 Oct 2013 Link to this post

    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 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 = $('id').replace('_listbox', '');
        autocomplete = $('#' + autocompleteId).data('kendoAutoComplete');;

    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?
  2. Alexander Popov
    Alexander Popov avatar
    1411 posts

    Posted 25 Oct 2013 Link to this post

    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) {


    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top