添加到 jquery 自动完成列表的项目无法突出显示或选择

Question

我正在使用以下代码将“其他”项添加到自动完成列表中：

    open: function(event, ui) {
        $('.ui-autocomplete').append('<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1"><strong>Other</strong></a></li>');
    },

“其他”项出现在每个列表的末尾，作为对用户键入内容的响应，但是当鼠标移到该项目上时，该项目不会突出显示，并且在单击时不会被选中。我需要做些什么来确保它突出显示并且可以在单击时被选中？

我正在使用 Firebug 将代码跟随到我的选择函数中，如下所示：

    select: function( event, ui ) {
        if (ui.item) {
            var value = ui.item.type + ui.item.id;
            var name = ui.item.acronym;
            addContent(value, name);
            event.preventDefault();
            $(this).val('');
        }
    },

当我单击“其他”以外的任何项目时，选择功能会正确执行，并且单击的项目会得到正确处理。但是当我单击“其他”项时，我在第 322 行的 jQuery UI 1.8.14min.js 中收到错误消息“f.item”为空。

所以除了通过 open 函数添加 li 元素之外，我还需要添加一个对象到映射到 li 的东西上。我该怎么做呢？

任何帮助将不胜感激。

谢谢

Answer 1

这个 JSFiddle 显示它工作得很好：The Fiddle

是否有可能在运行时有其他一些 div / DOM 对象与它重叠？

var test = function() {   
    
        $('.ui-autocomplete').append('<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1"><strong>Other</strong></a></li>');
    
}

test();