jquery ui autocomplete adding a span

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

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

How can I prevent this span from being created?

I solved it by adding a CSS rule:

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

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.

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

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:

create: function (e)

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

    create: function (e) {

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.

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.

Read More:   Save canvas as jpg to desktop [duplicate]

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 vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

for ada related stuff you could start here:

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

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

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

This will Work Perfectly:

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts