这似乎是JQuery UI 1.9.0中的一个新功能,因为之前我曾多次使用过JQuery UI,而且这篇文章从未加速过。
找不到与API文档相关的任何内容。
所以使用带有本地源的基本自动完成示例
$( "#find-subj" ).autocomplete({
source: availableTags
});
当搜索匹配时,它会显示此相关帮助文本:
'1个结果可用,使用向上和向下箭头键进行导航。'
如何以一种很好的方式禁用它,而不是通过使用JQuery选择器删除它。
答案 0 :(得分:149)
我知道这已被解答,但只是想给出一个实现示例:
$("#find-subj").autocomplete({
source: availableTags,
messages: {
noResults: '',
results: function() {}
}
});
答案 1 :(得分:83)
这用于辅助功能,隐藏它的简单方法是使用CSS:
.ui-helper-hidden-accessible { display:none; }
或(见Daniel的评论)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
答案 2 :(得分:22)
这里的最佳答案实现了理想的视觉效果,但是却失败了支持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;
}
将其复制到样式表而不是删除邮件,请:)。
答案 3 :(得分:17)
根据this blog:
我们现在使用ARIA直播区域宣布结果何时可用 以及如何浏览建议列表。公告 可以通过messages选项配置,该选项有两个属性: noResults表示没有返回任何项目,结果至少为 返回一件商品。通常,您只需要更改这些 如果您希望字符串使用其他语言编写,请使用选项。 我们可以在将来的版本中更改消息选项 致力于完整的字符串操作解决方案 所有插件的国际化。如果你对此感兴趣的话 消息选项,我们鼓励您只阅读源代码;该 相关代码位于自动完成插件的最底部,是 只有几行。
...
那么这如何应用于自动完成小部件?好吧,现在当你 搜索项目,如果您安装了屏幕阅读器,它将会读取 你可以选择“1个结果可用,使用向上和向下箭头键 导航。”。很酷,嗯?
因此,如果你去github并查看autocomplete source code,在第571行附近,你会看到实际实现的位置。
答案 4 :(得分:10)
添加jquery css也可以删除教学文本。
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
答案 5 :(得分:4)
由于这是出于可访问性原因,最好用CSS隐藏它。
但是,我建议:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
而不是:
.ui-helper-hidden-accessible { display:none; }
前者会将项目隐藏在屏幕外,但仍允许屏幕阅读器阅读,而display:none
则不然。
答案 6 :(得分:2)
嗯,这个问题有点旧了,但是当你包含相应的css文件时,文本根本没有出现:
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />
当然,您必须插入实际主题而不是YOUR_THEME_HERE
,例如“平滑度”
答案 7 :(得分:1)
在脚本中自动完成后立即添加此代码会将恼人的助手推离页面,但使用屏幕阅读器的人仍将从中受益:
DirectoryIndex
我不是用JS操纵CSS的粉丝,但在这种情况下我认为这是有道理的。 JS代码首先创建了这个问题,问题将在同一个文件中解决几行。 IMO这比在一个单独的CSS文件中解决问题更好,这个文件可能由其他人编辑,他们不知道为什么.ui-helper-hidden-accessible类被修改了。
答案 8 :(得分:0)
设置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);
}
答案 9 :(得分:0)
jQuery CSS .ui-helper-hidden-accessible位于themes / base / core.css文件中。您应该在样式表中包含此文件(至少)以便向前兼容。