jquery ui自动完成添加跨度

I am using jQuery autocomplete on a div but I am getting this extra span added automatically by jquery

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

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

How can I prevent this span from being created?

如何防止创建此跨度？

7 个解决方案

#1

It's for accessibility reason, blind people can 'read' how much results are find. If you really want to delete this, you can modify the source code:

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

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

But it's not recommended.

但不建议这样做。

#2

I have the same problem. this is how I solved... add css rule:

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

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

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

#3

You can get rid of it by adding this event handler to your autocomplete:

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

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

There's no harm in removing it unless you care about blind people accessing our page. I tried the display: none trick but that didn't work for me.

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

#4

I was using CSS flex box for layout with nth-child selectors, so, this span distorted my column layout.

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

display: none or position: absolute; top: -999999 won't resolve my problem. I had to remove the element from the DOM altogether, so, I wrote the following create event handler:

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

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

#5

you really shouldn't remove this (do you want to browse a web page which is only for blind people and you can't access the content?)...

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

it is not easy to make a website ada compliant. this span is just a very little piece of all that stuff.

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

hiding elements with display none or so is a bad practice regarding ada. that's why pages like facebook hide some elements by indenting them to somewhere off-screen:

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

display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

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

for ada related stuff you could start here: http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

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

maybe forcing the height to 0 might be of use in this case...

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

#6

Adding .css file worked for me (and of course removing all span elements worked too, but that is not a good solution):

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

#7

-3

This will Work Perfectly:

这将完美地工作：

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

#1