javascript jquery ui自动完成添加跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12791984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui autocomplete adding a span
提问by user391986
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?
如何防止创建此跨度？
采纳答案by jiguang
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.
但不建议这样做。
回答by user706420
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; }
回答by Ziad
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: nonetrick but that didn't work for me.
除非您关心盲人访问我们的页面，否则删除它没有任何害处。我尝试了这个display: none技巧，但这对我不起作用。
回答by Ashraf Sabry
I was using CSS flex box for layout with nth-child selectors, so, this span distorted my column layout.
我使用 CSS flex 框进行带有 nth-child 选择器的布局，因此，这个跨度扭曲了我的列布局。
display: noneor position: absolute; top: -999999won't resolve my problem. I had to remove the element from the DOM altogether, so, I wrote the following create eventhandler:
display: none或者position: absolute; top: -999999不会解决我的问题。我必须完全从 DOM 中删除元素，因此，我编写了以下创建事件处理程序：
create: function (e)
{
e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}
回答by Guntram
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:
隐藏与 display none 左右的元素对于 ada 来说是一种不好的做法。这就是为什么像 facebook 这样的页面通过将它们缩进到屏幕外的某个地方来隐藏一些元素的原因：
display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?
显示：无 vs 可见性：隐藏 vs 文本缩进：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-compatible-website/
maybe forcing the height to 0 might be of use in this case...
也许在这种情况下强制高度为 0 可能有用......
回答by ognjenkl
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" />
回答by Sindhuja Peacedove
This will Work Perfectly:
这将完美地工作：
$(document).ready(function(){ $("span").remove(); });
