Добавьте элементы li в автозаполнение пользовательского интерфейса jQuery, чтобы работал собственный обработчик кликов, ⇐ Jquery

[Anonymous]

Заранее извиняюсь, если вопрос покажется запутанным. Код сложен, поэтому я пытаюсь сбалансировать ясность, не предоставляя слишком много ненужных деталей.
Я использую виджет автозаполнения пользовательского интерфейса jQuery с исходным кодом AJAX. Результат содержит элемент списка в нижней части меню с атрибутом данных, соответствующим первичному ключу базы данных, который используется для загрузки дополнительных результатов из того же источника AJAX с добавленным параметром show_more.
Я добавляю эти новые элементы в отдельную функцию обработчика кликов и использую $('.ui-menu ul').append(li-items) в отображаемый список, чтобы добавить новые элементы сразу после элемента списка, который был только что нажали, но над другими результатами поиска. Нажатие или использование клавиш со стрелками и ввод этих добавленных элементов приводит к созданию ui.item == undefined в собственном методе выбора. Мы используем аддитивную схему поиска, поэтому я использую отдельный обработчик кликов, чтобы получить параметры строки запроса URL-адреса и добавить новый URL-адрес, если необходимо. Это работает нормально, за исключением использования клавиатуры для клавиш со стрелками -> Enter, что является требованием проекта. Использование клавиш со стрелками в меню выделяет добавленные ссылки, но не выбирает их.
Существует 2 различных дополнительных входа. Сам ввод автозаполнения и выбранный элемент автозаполнения. Мы хотим каждый раз отправлять входные данные в AJAX, но данные show_more будут отправляться только с событием щелчка по элементу меню.
Как добавить визуализированное меню в таким образом, чтобы встроенный обработчик выбора для кликов и событий клавиатуры работал сразу из коробки?
function searchClickHandler(url) {
if (!url || url == '') { return false; }
// 1. get the query string parameters, make an object
// 2. get the url argument, make key value
// loop through object, add new url if needed, construct new_url then redirect
window.location = new_url;
return false;
}

function initAutoComplete() {
$("#search").autocomplete({
open: function (event, ui) {
// fixes issue where selecting an autocomplete suggestion on iPad required 2 clicks
// Also prevents html from populating the autocomplete input
// http://stackoverflow.com/questions/2528 ... -to-1-11-0
$('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
},
source: "/ac_controller/autocompleteajax",
minLength: 0,
select: function (event, li) {
event.preventDefault();
return false;
}
})
.autocomplete('instance')._renderItem = function (ul, item) {
return renderItemFun(ul, item);
};
}

function renderItemFun(ul, item) {
if (item.prettymeta == 'see more recent searches' && !Object.hasOwn(item, 'heading')) {
return $("[*]")
.append(
`[url=javascript:void(0)]
see more recent searches
[/url]
`).appendTo(ul);
} else {
return $("").append(`[url=javascript:void(0);]

${item.label}

[/url]`).appendTo(ul);
}
}

$(document).ready(function () {
initAutoComplete();
$('body').on('click', '.ui-menu-item a:not(.add-new-results)', function (e) {
e.preventDefault();
let url = $(this).attr('data-url');
searchClickHandler(url);
});

$('body').on('click', '.add-new-results', function (e) {
let original = $(this);
let start = $(this).data('more');
let term = $('#search').val();

$.get(
`/ac_controller/autocompleteajax/`,
{ 'term': term, 'show_more': start },
function (data) {
let recents = JSON.parse(data);
let html = '';
for (let i = 0; i < recents.length; i++) {
if (Object.hasOwn(recents, 'heading')) { continue; }
if (recents.metatype == 'recent_search' && recents.url != 'javascript:void(0);') {
html += `
[url=javascript:void(0);]
${recents.label}
[/url]
`;
} else if (recents.prettymeta == 'see more recent searches' && Object.hasOwn(recents, 'show_more')) {
html += `[*]
[url=javascript:void(0)]
see more recent searches
[/url]
`;
}
}
original.closest('li').after(html);
original.closest('li').remove();
$("#search").addClass('active');
}
);
});
});


Подробнее здесь: https://stackoverflow.com/questions/792 ... works-with