如何删除/更改JQuery UI自动完成助手文本?
看来这是JQuery UI 1.9.0中的一个新function,因为我之前使用过JQuery UI,而且这个文本从来没有被join过。
在API文档中找不到任何相关内容。
因此,使用本地源代码的基本自动完成示例
$( "#find-subj" ).autocomplete({ source: availableTags });
当search匹配时,显示这个相关的帮助文本:
'1结果可用,使用向上和向下箭头键导航。
我怎样才能以很好的方式禁用它,而不是通过JQueryselect器删除它。
我知道这个问题已经解决了,但是只是想给出一个实现的例子:
$("#find-subj").autocomplete({ source: availableTags, messages: { noResults: '', results: function() {} } });
这是用于访问,一个简单的方法来隐藏它与CSS:
.ui-helper-hidden-accessible { display:none; }
或者(见但以理的评论)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
这里的最佳答案达到了所需的视觉效果,但却击败了拥有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; }
将其复制到您的样式表中,而不是删除该消息,请:)。
根据这个博客 :
我们现在使用ARIA直播区域来宣布结果何时可用以及如何浏览build议列表。 通知可以通过消息选项进行configuration,消息选项具有两个属性:noResults表示没有项目返回时的结果,至less返回一个项目的结果。 一般来说,如果您希望以不同的语言编写string,只需要更改这些选项。 消息选项在未来版本中可能会发生变化,同时我们将为所有插件提供string操作和国际化的完整解决scheme。 如果您对邮件选项感兴趣,我们鼓励您阅读源代码; 相关代码位于自动完成插件的底部,只有几行。
…
那么这如何适用于自动填充小部件? 那么,现在当你search一个项目,如果你有一个屏幕阅读器安装它会读你的东西,如“1结果是可用的,使用向上和向下箭头键导航”。 很酷,是吧?
所以,如果你去github,看看自动完成的源代码 ,在571行左右,你会看到这是实际实现。
添加jQuery的CSS也努力去除教学文字。
<link rel="stylesheet" href="ui/1.9.0/themes/smoothness/jquery-ui.css" />
由于这是出于可访问性的原因,最好用CSS隐藏它。
不过,我会build议:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
而不是:
.ui-helper-hidden-accessible { display:none; }
由于前者会将项目隐藏在屏幕外,但仍允许屏幕阅读器阅读,而display:none
则不允许。
那么,这个问题有点老,但是当你包含相应的css文件时,文本并没有显示出来:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />
当然,你必须插入一个实际的主题,而不是YOUR_THEME_HERE
例如“平滑”
在脚本的自动完成之后添加这段代码会将恼人的帮手从页面中移除,但使用屏幕阅读器的人仍然可以从中受益:
$(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代码首先创build了这个问题,这个问题将在同一个文件中的几行下面解决。 IMO比单独的CSS文件解决问题更好,这个文件可能被其他不知道为什么可以修改.ui-helper-hidden-accessible类的人编辑。
devise一下jQuery主题本身的样式。 其他许多答案build议包括整个样式表,但是如果你只是想要相关的CSS,这是如何在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); }
jQuery CSS .ui-helper-hidden-accessible位于themes / base / core.css文件中。 您应该在样式表中包含此文件(至less)以提供前向兼容性。