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?

score 42 · Answer 1 · edited Jul 12 '20 at 00:01

42

I solved it by adding a CSS rule:

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

edited Jul 12 '20 at 00:01

Andreas is moving to Codidact

1,642
4
21
40

answered Oct 14 '12 at 14:24

user706420

1,167
3
13
23

1

this worked for me. i have a question around why this happens (why this span shows up and becomes visible containing the autocomplete returned values)? it just happened to me suddenly. It didn't happen before. – Hung Luu Dec 04 '12 at 19:55
1

Maybe it's because you upgrade jQuery UI to newer version. – Agile Hobo Feb 20 '13 at 08:44
2

I've just upgraded to the latest JQ versions including the UI and it started after I upgraded. Oddly, the older version i was working with didn't do this. – TH1981 Mar 10 '13 at 15:35
1

For those using Bootstrap 3 who wish to keep the intended functionality, add ```.ui-helper-hidden-accessible{@extend .sr-only;}``` to your framework_and_overrides.css.scss file. There is probably something similar in Foundation now as well... – genkilabs Jan 27 '14 at 20:08

score 6 · Accepted Answer · edited May 21 '13 at 15:12

6

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.

edited May 21 '13 at 15:12

toro2k

19,020
7
64
71

answered Oct 09 '12 at 02:28

jiguang

352
1
2
7

5

for blind people, 'read' actually means 'listen', by some tools :) – jiguang Apr 02 '13 at 10:10
2

In addition to screen-reader software applications that converts text to synthesized speech, there are Braille displays which show a page 40 (or 80) characters at a time, sequentially. http://en.wikipedia.org/wiki/Refreshable_Braille_display – Ubuntourist Jul 12 '13 at 16:09

score 1 · Answer 3 · answered May 25 '14 at 09:56

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"));
}

score 0 · Answer 4 · answered Jun 20 '14 at 13:22

0

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.

answered Jun 20 '14 at 13:22

Ziad

1,036
2
21
31

1

it's not strange for people to care for blind or otherwise disabled ones. So there is harm if you do it, even if you don't care – Riccardo Cossu Mar 17 '21 at 12:29
It's a contextual issue and, in many cases, it makes sense to not care about providing support that will never be requested in the first place, like in an app requiring visual dexterity. – Ziad Mar 22 '21 at 08:10

score 0 · Answer 5 · edited May 23 '17 at 10:30

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.

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: 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...

score 0 · Answer 6 · answered Nov 16 '16 at 07:30

0

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" />

answered Nov 16 '16 at 07:30

ognjenkl

1,407
15
11

score -3 · Answer 7 · edited Nov 27 '14 at 08:09

-3

This will Work Perfectly:

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

edited Nov 27 '14 at 08:09

Surya

4,446
2
17
19

answered Nov 27 '14 at 07:41

Sindhuja Peacedove

1
1

1

you will remove all span elements into `HTML DOM` with this answer – ahmed hamdy Nov 15 '15 at 17:23

jquery ui autocomplete adding a span

7 Answers7

Linked