jquery ui autocomplete adding a span

Question

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?

Answer 1

I solved it by adding a CSS rule:

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

Answer 2

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.

Answer 3

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)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}