jQuery自动完成不选择项目答案

【问题标题】：jQuery autocomplete don't select itemjQuery自动完成不选择项目
【发布时间】：2011-09-05 09:46:36
【问题描述】：

在选项“源”中，我使用 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 现在看起来像这样：

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

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

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

如何将自定义 -li- 添加到列表末尾且不可选择？

jQuery-UI 1.8.13

【问题讨论】：

标签： javascript jquery jquery-ui-autocomplete

【解决方案1】：

我发现如果您的li 元素不包含a 标记，此小部件会报错。我意识到这使它可以选择，因此您要么必须针对您的情况扩展类，要么创建一个 CSS 规则以确保 li 不会获得选定状态（这有点 hack，我承认）

【讨论】：

如果 hacks 有效，那么我倾向于称它们为“巧妙的无证编码”:)
只要您的自定义li 没有.ui-menu-item 类，它就不会在单击时触发自动完成选择事件。

【解决方案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() 只是停止该事件。在某些情况下（当使用键盘导航列表时），它将使用项目的值填充输入。如果您确定所选项目或将要更改的值实际上是您的数据项，则您希望您的测试重置文本框的值。

【讨论】：