jQuery 自动完成不选择项目

Question

在选项“源”中，我使用 ajax 获得结果 + 1 个自定义注释文本，其中包含有关可能结果的信息。例如：“显示 3456 个结果中的第 2 个”。它只是为用户提供的信息。

对于 -ul- 列表中的最后一个条目，我不会处理以下事件：keyup、keydown、pageup 和 pagedown。

为此，我在“打开”选项中设置了这一点：

open: function(event, ui) {
$("ul.ui-autocomplete.ui-menu li:last").removeClass("ui-menu-item").removeAttr("role").html('Show 2 of 3456 results');
},

HTML 现在看起来像这样：

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 1</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Result 2</a>
</li>
<li class="">Show 2 of 3456 results</li>
</ul>

如果它至少给出了至少一个真实结果，而不仅仅是最后一个注释文本，则此方法有效。

但是，如果没有结果可用，并且只有注释文本（最后一项）“无结果”，那么我会在事件中收到错误消息：keyup、keydown、pageup 和 pagedown。

Firebug 中的错误：item.offset() 为 null

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 39px; left: 79px; display: block; width: 273px;">
<li class="">No Results</li>
</ul>

我该怎么做才能将自定义 -li- 添加到列表末尾且不可选择？

jQuery-UI 1.8.13

Answer 1

我发现如果您的 li 元素不包含 a 标记，此小部件会发出错误消息。我意识到这使得它可以选择，因此您要么必须根据您的情况稍微扩展该类，要么创建一个 CSS 规则来确保 li 不会获得选定状态（这有点我承认是黑客攻击）

Answer 2

与其搞乱 CSS 选择器，为什么不绑定到 select 和 change 事件来检查要添加到对象的自定义数据（可通过 ui.item 这些事件的参数）？您最终会得到如下结果：

$(function() {
    $("#acInput").autocomplete({
                                    source: availableTags,
                                    select: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault(); 
                                    },
                                    change: function(event, ui) { 
                                        // if it's your info item, then
                                        event.preventDefault();
                                    }
                               });
});

请注意，preventDefault() 只是停止该事件。在某些情况下（当使用键盘导航列表时），它将使用项目的值填充输入。如果您确定所选项目或要更改的值实际上是您的数据项，您可能希望测试重置文本框的值。