Question

这似乎是JQuery UI 1.9.0中的一个新功能，因为之前我曾多次使用过JQuery UI，而且这篇文章从未加速过。

找不到与API文档相关的任何内容。

所以使用带有本地源的基本自动完成示例

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

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

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

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

Answer 1

我知道这已被解答，但只是想给出一个实现示例：

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});

Answer 2

这用于辅助功能，隐藏它的简单方法是使用CSS：

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

或（见Daniel的评论）

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

Answer 3

这里的最佳答案实现了理想的视觉效果，但是却失败了支持ARIA的jQuery对象，并且对依赖它的用户来说有点蠢！那些提到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;
}

将其复制到样式表而不是删除邮件，请：）。

Answer 4

根据this blog：

我们现在使用ARIA直播区域宣布结果何时可用   以及如何浏览建议列表。公告   可以通过messages选项配置，该选项有两个属性：   noResults表示没有返回任何项目，结果至少为   返回一件商品。通常，您只需要更改这些   如果您希望字符串使用其他语言编写，请使用选项。   我们可以在将来的版本中更改消息选项   致力于完整的字符串操作解决方案   所有插件的国际化。如果你对此感兴趣的话   消息选项，我们鼓励您只阅读源代码;该   相关代码位于自动完成插件的最底部，是   只有几行。

...

那么这如何应用于自动完成小部件？好吧，现在当你   搜索项目，如果您安装了屏幕阅读器，它将会读取   你可以选择“1个结果可用，使用向上和向下箭头键   导航。”。很酷，嗯？

因此，如果你去github并查看autocomplete source code，在第571行附近，你会看到实际实现的位置。

Answer 5

添加jquery css也可以删除教学文本。

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

Answer 6

由于这是出于可访问性原因，最好用CSS隐藏它。

但是，我建议：

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

而不是：

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

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

Answer 7

嗯，这个问题有点旧了，但是当你包含相应的css文件时，文本根本没有出现：

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

当然，您必须插入实际主题而不是YOUR_THEME_HERE，例如“平滑度”

Answer 8

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

DirectoryIndex

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

Answer 9

设置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);
}

Answer 10

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

如何删除/更改JQuery UI Autocomplete Helper文本？

10 个答案: