95

这似乎是 JQuery UI 1.9.0 中的一个新功能，因为我之前使用过很多次 JQuery UI 并且从未弹出此文本。

在 API 文档中找不到任何相关内容。

因此，使用带有本地源的基本自动完成示例

$( "#find-subj" ).autocomplete({
    source: availableTags
});

当搜索匹配时，它会显示这个相关的帮助文本：

'1 个结果可用，使用向上和向下箭头键导航。

如何以一种很好的方式禁用它，而不是使用 JQuery 选择器将其删除。

4

10 回答 10

153

我知道这已经得到解决，但只是想给出一个实现示例：

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});
于 2012-10-26T17:23:32.493 回答
89

这用于可访问性，一种隐藏它的简单方法是使用 CSS：

.ui-helper-hidden-accessible { display:none; }

或者（见下面丹尼尔的评论）

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
于 2012-11-13T14:15:53.997 回答
24

上面的答案达到了想要的视觉效果，但是打败了jQuery支持ARIA的对象，对于依赖它的用户来说有点小菜一碟！那些提到jQuery CSS为你隐藏这个的人是正确的，这就是这样做的风格：

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

请将其复制到您的样式表中，而不是删除消息，请:)。

于 2013-09-05T13:58:02.937 回答
17

根据这个博客：

我们现在使用 ARIA 实时区域来宣布结果何时可用以及如何浏览建议列表。公告可以通过 messages 选项进行配置，该选项有两个属性：noResults 表示没有返回任何项目，而results 表示至少返回一项。通常，如果您希望字符串以不同的语言编写，您只需要更改这些选项。消息选项在未来版本中可能会发生变化，而我们正在为所有插件的字符串操作和国际化提供完整的解决方案。如果您对消息选项感兴趣，我们鼓励您阅读源代码；相关代码位于自动完成插件的最底部，只有几行。

...

那么这如何应用于自动完成小部件？好吧，现在当你搜索一个项目时，如果你安装了屏幕阅读器，它会读到类似“1 个结果可用，使用向上和向下箭头键导航。”之类的内容。很酷吧？

因此，如果你去 github 并查看自动完成源代码，大约在第 571 行，你会看到它实际上是在哪里实现的。

于 2012-10-22T15:19:24.140 回答
12

添加 jquery css 也可以删除说明文本。

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
于 2013-08-22T17:24:12.400 回答
5

由于这是出于可访问性的原因，因此最好使用 CSS 将其隐藏。

但是，我建议：

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

而不是：

.ui-helper-hidden-accessible { display:none; }

因为前者会将项目隐藏在屏幕外，但仍允许屏幕阅读器阅读它，而display:none不会。

于 2013-06-11T14:39:50.113 回答
2

好吧，这个问题有点老了，但是当您包含相应的 css 文件时，文本根本不显示：

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

当然你必须插入一个实际的主题而不是YOUR_THEME_HERE例如“平滑度”

于 2013-08-02T18:03:31.370 回答
1

样式它如何 jQuery 主题本身的样式。许多其他答案建议包括整个样式表，但如果您只想要相关的 CSS，这就是它的完成方式http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css：

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}
于 2015-03-06T09:14:59.820 回答
1

jQuery CSS .ui-helper-hidden-accessible 位于themes/base/core.css 文件中。为了向前兼容，您应该（至少）在样式表中包含此文件。

于 2017-01-24T18:10:17.810 回答
1

在脚本中的自动完成之后立即添加此代码会将烦人的助手推离页面，但使用屏幕阅读器的人仍然会从中受益：

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

我不喜欢用 JS 操作 CSS，但在这种情况下，我认为这是有道理的。JS代码首先创建了问题，并且在同一文件中的以下几行将解决问题。IMO 这比在单独的 CSS 文件中解决问题要好，该文件可能由其他不知道为什么 .ui-helper-hidden-accessible 类被这样修改的人编辑。

于 2017-07-21T14:19:28.363 回答