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

Question

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

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

因此,使用本地源的基本自动完成示例

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

当搜索匹配时,它显示此相关帮助文本:

'1结果可用,使用向上和向下箭头键进行导航.

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

Answer 1

我知道这已经回答了,但只是想给出一个实现示例:

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

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

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

根据这篇博客:

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

...

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

因此,如果你去github并查看自动完成源代码,在第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不会。