Relative Content

Tag Archive for jqueryevent-handlingkeyboard-eventsjquery-ui-autocomplete

How to add li items into jQuery UI Autocomplete so the native click handler works

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