I’m using jQuery UI Autocomplete widget with an AJAX source. I have a list item at the bottom of the menu to load and append more results, from the same AJAX source with an added parameter. I add these new items in a separate click handler function, and use $('.ui-menu ul').append(li-items) to the rendered list. Clicking or using the arrow keys and enter on these added items produces ui.item == undefined in the native select method. I tried using a separate click-handler to get around this problem and that works fine except for using the keyboard to arrow key->enter, which is a requirement of the project. Using the arrow keys in the menu highlights the added links

I assume I’d assign the autocomplete initialization to a variable, then call the variable to add the additional items but I can’t find that in the documentation.

How can I either append the rendered menu in such a way that the native select handler for clicks and keyboard events works out of the box (preferred), or select a link that is active by means of keyboard navigation? I have tried selecting the active link by the following hack, just to see if I get anything, but it didn’t work:

$('body').on('keyup keydown', function (){
  console.log($('body').find('a:focus, a:active'))
})