jQuery Autocomplete: CSS ui-focus-state class not added to focused item when using key arrows

Normally, when using jQuery Autocomplete, one can browse through the shown list items with keys. If the item currently chosen with arrow keys is to be styled with CSS, I do this:

.ui-state-focus {
   background-color: blue;
}

This worked for me every time.

Currently, in jQuery UI - v1.12.0, the ui-state-focus class is not added to the list element when it's selected with arrow keys.

I render the items in a custom way, like this:

return $('<li>')
    .attr('data-id', item.id)
    .attr('tabindex', '-1')
    .append(appendItem) /* Text content of the item */
    .appendTo(ul);

I understand this probably has nothing to do with the jQuery UI version I'm using. But I don't get why the ui-state-focus is not added to my items, so I can style the focus state.

UPDATE

Also, when I use the autoFocus: true property in the Autocomplete config - it doesn't work at all. It should focus on the first list element shown, but it does nothing. Changing other properties (like delay) works fine.

It actually has to do with the jquery-ui version you are using. They are mentioning the change in the v1.12 upgrade guide.

https://jqueryui.com/upgrade-guide/1.12/#use-consistent-styling-for-focused-and-active-items

We used to style active parent menu items with ui-state-active, while everything else got ui-state-focus (or ui-state-hover, which we style the same as focus). When a menu item in a submenu has focus, the parent menu item gets ui-state-active, which is inconsistent and confusing. We've now switched to using only the ui-state-active class.

JqueryUI Autocomplete item focus does not work using arrow keys, In my jQuery Autocomplete widget, for some reason, the list items are selected But when using arrow keys to navigate the Autocomplete list the item is not focused. But the item is not focused (see screenshot). CSS: .ui-menu-item:​hover{ cursor: pointer; Try adding all those classes to your own CSS. Browse other questions tagged javascript jquery css jquery-ui jquery-ui-autocomplete or ask your own question. The Overflow Blog Podcast 240: JavaScript is ready to get its own place

You need to add a sub DOM element inside the li, for example:

<li><div class="ui-menu-item-wrapper"></div></li>

This wrapper will now get the ui-state-active class (in before this class was called ui-state-focus) you can style within your CSS, otherwise this state won't be applied to the selected row when the wrapper is missing, which is also a change to previous jQuery UI autocomplete versions.

Autocomplete change background color of focused element on up , But the background color of the focused element is not changed when the user focuses the element using keyboard up/down arrows. I want to  JqueryUI - Autocomplete - Auto completion is a mechanism frequently used in modern websites to provide the user with a list of suggestions for the beginning of the word, which he/she has

Need to customize js(v1.12) for ui-focus-state class added to focused item when using key arrows

Custom way like this :

Step 1:
                   focused = this.active.children( ".ui-menu-item-wrapper" );
                   this._addClass( focused, null, "ui-state-active" );
    **Replace with**:
                    focused = this.active.closest( ".ui-menu-item" );
                    this._addClass( focused, null, "ui-state-focus" );

Step 2:
                   activeParent = this.active.parent().closest( ".ui-menu-item" ).
                   children( ".ui-menu-item-rapper" );
                   this._addClass( activeParent, null, "ui-state-active" ); 
    **Replce with**:
                   activeParent = this.active.parent().closest( ".ui-menu-item" );
                   this._addClass( activeParent, null, "ui-state-focus" );

Step 3:           this._removeClass( this.active.children( ".ui-menu-item-wrapper" )
                  ,null, "ui-state-active" );

   **Replace with** :
                  this._removeClass( this.active.closest( ".ui-menu-item" ),
                  null, "ui-state-focus" );  

jQuery UI example - automatically (Autocomplete), Previous: jQuery UI example - folding panel (Accordion) href = "// code.jquery.​com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src to match items with accented characters, even if the text field does not contain currentCategory) { ul.append ( "<li class = 'ui-autocomplete-category'>" + item.​category + "</ li>");  When the menu is open, the following key commands are available: UP - Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item. DOWN - Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item. ESCAPE - Close the menu.

Autocomplete Widget, TAB : Select the currently focused item, close the menu, and move focus to the next CSS class names can be used for overrides or as keys for the classes option: to the user, the ui-autocomplete-loading class is also added to this element. Note: The appendTo option should not be changed while the suggestions  function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/

jQuery UI 1.9 Upgrade Guide, removeUniqueId() method will remove the id from the element if it was added by . The key codes are not useful in this situation, and you should use the event Non-namespaced widget instances and item.autocomplete will be removed in If you were styling the ui-tabs-selected or ui-state-processing classes, you will  When the menu is open, the following key commands are available: UP: Move focus to the previous item. If on first item, move focus to the input. If on the input, move focus to last item. DOWN: Move focus to the next item. If on last item, move focus to the input. If on the input, move focus to the first item. ESCAPE: Close the menu.

Vue autocomplete codepen, We also make use of the new cache-items prop. codepen See the Pen Twitter Jul 02, 2019 · jQuery UI Widgets › Forums › Editors › MaskedInput › turn off auto complete values, e. focus() Sets focus to the input element representing the widget. js. Navigate to the suggestion list either by mouse or keyboard arrow keys. The jQuery UI Autocomplete widget enables users to quickly find and select from a list of values as they type. If you find the jQuery UI Autocomplete demos and documentation too daunting, here are some examples with explanation to get you started. Using Label-Value Pairs; Add CSS Class to the Dropdown; Load Data via AJAX; Highlight Matched Text

Comments
  • I was pulling my hair out over this until i actually added the ui-menu-item-wrapper class to the DOM element, which seems to be what Jquery searches for, not just the first child element...