jquery ui自动完成添加跨度

我在div上使用jQuery自动完成，但我得到jquery自动添加的额外跨度

"search test" 

如何防止创建此跨度？

Answer 1

这是出于可访问性的原因，盲人可以“阅读”找到多少结果。 如果你真的想删除它，你可以修改源代码：

 this.liveRegion = $( "", { role: "status", "aria-live": "polite" }) .addClass( "ui-helper-hidden-accessible" ) .insertAfter( this.element ); 

但不建议这样做。

Answer 2

我也有同样的问题。 这就是我解决的问题…添加css规则：

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

Answer 3

您可以通过将此事件处理程序添加到自动完成function来摆脱它：

 $(element).autocomplete({ ... create: function (e) { $(this).prev('.ui-helper-hidden-accessible').remove(); } }); 

除非你关心盲人访问我们的网页，否则删除它是没有害处的。 我尝试了display: none技巧，但这对我不起作用。

Answer 4

我使用CSS flex box进行布局，使用nth-child选择器，因此，这个跨度扭曲了我的列布局。

display: none或position: absolute; top: -999999 position: absolute; top: -999999无法解决我的问题。 我必须完全从DOM中删除元素，因此，我编写了以下create事件处理程序：

 create: function (e) { e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible")); } 

Answer 5

你真的不应该删除这个（你想浏览一个仅适用于盲人的网页而你无法访问内容吗？）…

要使网站符合ada标准并不容易。 这个范围只是所有这些内容的一小部分。

隐藏显示无元素的元素是关于ada的不良做法。 这就是为什么像facebook这样的页面通过将它们缩进到屏幕外的某个地方来隐藏一些元素：

display：none vs visibility：hidden vs text-indent：9999屏幕阅读器的表现如何？

对于ada相关的东西你可以从这里开始： http ： //www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

也许强迫高度为0可能在这种情况下使用…

Answer 6

添加.css文件对我有用（当然也删除了所有span元素，但这不是一个好的解决方案）：

Answer 7

这将完美地工作：

 $(document).ready(function(){ $("span").remove(); });