如何删除/更改 JQuery UI 自动完成助手文本？

Posted 2023-03-05

【中文标题】如何删除/更改 JQuery UI 自动完成助手文本？

【英文标题】：How to remove/change JQuery UI Autocomplete Helper text?

【发布时间】：2012-10-12 05:52:36

【问题描述】：

这似乎是 JQuery UI 1.9.0 中的一个新功能，因为我之前使用过很多次 JQuery UI 并且没有弹出这个文本。

在 API 文档中找不到任何相关内容。

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

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

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

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

我怎样才能以一种很好的方式禁用它，而不是通过使用 JQuery 选择器来删除它。

【问题讨论】：

您在哪个浏览器中看到这个？你能在 jquery ui 网站中看到相同的对话框吗

我从来没有见过这个，你能不能提供一个提琴手或一些额外的代码，以便我们进一步研究？

对我来说，问题是那个位置：相对，正在被显示可访问性内容的跨度覆盖...我刚刚添加了“！important”，现在我可以保持可访问性跨度>

您的疑问节省了我的时间。因此 +1 给你 :-)

【参考方案1】：

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

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

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

【讨论】：

我试过这个，它把字符串“null”放在同一个地方。解决办法是改成：noResults: ''，你就不会收到消息了。

为我工作但没有结果：''。想知道为什么它没有记录在 api.jqueryui.com

不确定source: availableTags 是做什么的？我删除了它，但我仍然没有消息。

@Django Reinhardt 刚刚从 OP 问题中的示例复制过来。 Source 定义了自动完成数据的来源。例如，例如availableTags可以是一个包含json对象的局部变量，将URL的JSON对象进行单词映射[ '/tag/cats': 'Cats', etc... ]所以当用户键入Ca cats将显示在下拉列表中，选择或点击它可以填充隐藏字段以网址为例。

非常感谢。在 API 文档中找不到这个。

【参考方案2】：

这用于可访问性，隐藏它的简单方法是使用 CSS：

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

或者（见下面丹尼尔的评论）

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

【讨论】：

正如您所说，它用于辅助功能，因此具有屏幕阅读器的人可以更好地理解小部件。通过使用显示：无；您也将其隐藏在屏幕阅读器中。最好将其移动到屏幕的位置：绝对；左：-999em;

除了left: -9999px，您还可以使用left: 200%（200% 与 100% 只是为了解决任何可能的浏览器怪癖，其中 100% 不完全把它从屏幕上拿下来）。

【参考方案3】：

这里的最佳答案达到了想要的视觉效果，但是打败了jQuery支持ARIA的对象，对于依赖它的用户来说有点鸡肋！那些提到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;

请将其复制到您的样式表中，而不是删除该消息：)。

【讨论】：

2019 年更新：不要使用 clip 属性，因为它现在已被弃用 - 请参阅 developer.mozilla.org/en-US/docs/Web/CSS/clip

是的，这是在官方jquery-ui/themes/base/core.css 中。确保包含它。

【参考方案4】：

根据this blog：

我们现在使用 ARIA 实时区域来宣布结果何时可用 以及如何浏览建议列表。公告 可以通过 messages 选项进行配置，该选项有两个属性： noResults 表示没有返回任何项目，至少表示结果 一件物品被退回。一般来说，您只需要更改这些 如果您希望字符串以不同的语言编写，选项。 消息选项在未来版本中可能会发生变化，而我们 致力于字符串操作的完整解决方案和 所有插件的国际化。如果您对以下内容感兴趣 消息选项，我们鼓励您只阅读源代码；这 相关代码位于自动完成插件的最底部，并且是 只有几行。

...

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

因此，如果您访问 github 并查看 autocomplete source code，在第 571 行附近，您将看到实际实现的位置。

【参考方案5】：

添加 jquery css 也可以删除说明文本。

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

【讨论】：

也为我工作。

【参考方案6】：

因为这是出于可访问性的原因，所以最好用 CSS 隐藏它。

不过，我建议：

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

而不是：

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

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

【讨论】：

而不是left: -9999px，只需使用left: 200%（200% vs. 100% 只是为了解决任何可能的浏览器怪癖，其中 100% 不能完全得到它离开屏幕）。

【参考方案7】：

嗯，这个问题有点老了，但是当你包含相应的 css 文件时，文本根本不显示：

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

当然你必须插入一个实际的主题而不是YOUR_THEME_HERE，例如“流畅”

【参考方案8】：

样式它是 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】：

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

【参考方案10】：

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

$(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代码首先创建了问题，并且在同一文件中的以下几行将解决问题。 IMO 这比在单独的 CSS 文件中解决问题要好，该文件可能由不知道为什么 .ui-helper-hidden-accessible 类被这样修改的其他人编辑。

【讨论】：

我一直在寻找解决这个问题的方法，你的解决方案奏效了。

而不是left: -9999px，只需使用left: 200%（200% 与 100% 只是为了解决任何可能的浏览器怪癖，其中 100% 不能完全得到它离开屏幕）。