如何删除/更改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)以提供前向兼容性。