How to remove/change JQuery UI Autocomplete Helper text?

Question

It seems that this is a new feature in JQuery UI 1.9.0, because I used JQuery UI plenty of times before and this text never poped up.

Couldn't find anything related on the API documentation.

So using an basic autocomplete example with local source

$( "#find-subj" ).autocomplete({
    source: availableTags
});

When the search matches it shows this related helper text:

'1 result is available, use up and down arrow keys to navigate.'

How can I disable it in a nice way, not by removing it with JQuery selectors.

in which browser do you see this ? are you able to see the same dialog in jquery ui website — fuzionpro, Oct 22 '12 at 12:45
I have never seen this, can you possibly provide a fiddler or some additional code so we can look into it more? — zmanc, Oct 22 '12 at 12:53
for me the issue was that position: relative, was being overridden for the span on which the accessibility stuff was displaying... I just added "!important" and now I can keep the accessibility — Positonic, Mar 15 '13 at 12:28

score 154 · Accepted Answer · edited Oct 01 '19 at 06:25

154

I know this has been asnwered but just wanted to give an implementation example:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

edited Oct 01 '19 at 06:25

2pha

9,798
2
29
43

answered Oct 26 '12 at 17:23

4

I tried this and it puts the string "null" in the same place. The solution is to change to: noResults: '', and you will get no message at all. – Patrick Jan 11 '13 at 17:55
3

Worked for me with noResults:''. Wonder why it's not documented on api.jqueryui.com – Niels Steenbeek Jan 22 '13 at 12:59
Not sure what `source: availableTags` does? I removed it and I still had no messages. – Chuck Le Butt Mar 07 '13 at 15:49
3

@Django Reinhardt that was just copied over from the example in the OP's question. Source defines where the autocomplete data is coming from. For example `availableTags` could be a local variable containing a JSON object of url to word mapping `[{ '/tag/cats': 'Cats', etc... }]` So when the user types `Ca` Cats will show up in the dropdown and when selected or clicked it can populate a hidden field with the url for example. – Mar 07 '13 at 16:08
This is still valid in 2019. I added availableTags example and a better example of the results function – 2pha Oct 01 '19 at 06:28

Bertrand · Answer 2 · 2014-02-27T16:34:18.570

89

This is used for accessibility, an easy way to hide it is with CSS:

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

Or (see Daniel's comment bellow)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

edited Feb 27 '14 at 16:34

answered Nov 13 '12 at 14:15

Bertrand

13,540
5
39
48

5

As you said, it's used for accessibility so people with screen readers can understand the widget better. By using display: none; you hide it from screen readers as well. Better to move it of screen with position: absolte; left:-999em; – Daniel Göransson Feb 26 '14 at 10:20
Instead of `left: -9999px`, you can also use `left: 200%` (200% vs. 100% just to account for any possible browser quirks where 100% doesn't *quite* get it off the screen). – jbyrd Apr 16 '19 at 13:57

score 24 · Answer 3 · answered Sep 05 '13 at 13:58

24

The top answer here achieves the desired visual effect, but defeats the object of jQuery having ARIA support, and is a bit dickish to users who rely upon it! Those who've mentioned that jQuery CSS hides this for you are correct, and this is the style which does that:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Copy that into your stylesheet instead of removing the message, please :).

answered Sep 05 '13 at 13:58

Mike Campbell

7,921
2
38
51

1

2019 update: don't use the `clip` property, as it's now deprecated - see https://developer.mozilla.org/en-US/docs/Web/CSS/clip – jbyrd Apr 16 '19 at 13:59
1

Yup this is in the official `jquery-ui/themes/base/core.css`. Make sure to include it. – konyak Dec 17 '20 at 17:40

score 17 · Answer 4 · edited Mar 18 '16 at 09:56

According to this blog:

We now use ARIA live regions to announce when results become available and how to navigate through the list of suggestions. The announcements can be configured via the messages option, which has two properties: noResults for when no items are returned and results for when at least one item is returned. In general, you would only need to change these options if you want the string to be written in a different language. The messages option is subject to change in future versions while we work on a full solution for string manipulation and internationalization across all plugins. If you’re interested in the messages option, we encourage you to just read the source; the relevant code is at the very bottom of the autocomplete plugin and is only a few lines.

...

So how does this apply to the autocomplete widget? Well, now when you search for an item, if you have a screen reader installed it will read you something like “1 result is available, use up and down arrow keys to navigate.”. Pretty cool, huh?

So if you go to github and look at the autocomplete source code, around line 571 you'll see where this is actually implemented.

score 12 · Answer 5 · answered Aug 22 '13 at 17:24

12

Adding the jquery css also worked to remove the instructional text.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />

answered Aug 22 '13 at 17:24

user2708344

129
1
2

Beware: this is likely to wreck the rest of the styling of your page. – TylerH Jun 10 '22 at 21:51

score 5 · Answer 6 · answered Jun 11 '13 at 14:39

5

Since this is in there for accessibility reasons it's probably best to hide it with CSS.

However, I would suggest:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

Rather than:

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

As the former will hide the item off-screen, but still allow screen-readers to read it, whereas display:none does not.

answered Jun 11 '13 at 14:39

Neil Sayers

51
1
1

Instead of `left: -9999px`, just use `left: 200%` (200% vs. 100% just to account for any possible browser quirks where 100% doesn't *quite* get it off the screen). – jbyrd Apr 16 '19 at 13:56

score 2 · Answer 7 · answered Aug 02 '13 at 18:03

Well, this question is a bit older, but the text does not show up at all when you include the according css file:

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

Of course you have to insert an actual theme instead of YOUR_THEME_HERE e.g. "smoothness"

score 1 · Answer 8 · answered Mar 06 '15 at 09:14

Style it how the jQuery theme itself styles it. A lot of the other answers suggest including a whole stylesheet, but if you just want the relevant CSS, this is how it's done in http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

score 1 · Answer 9 · answered Jan 24 '17 at 18:10

1

The jQuery CSS .ui-helper-hidden-accessible is in the themes/base/core.css file. You should include this file (at a minimum) in your stylesheets for forward compatibility.

answered Jan 24 '17 at 18:10

pzupan

169
1
7

score 1 · Answer 10 · answered Jul 21 '17 at 14:19

Adding this code right after the autocomplete in your script will push the annoying helper off the page, but the people using screen readers will still benefit from it:

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

I'm not a fan of manipulating CSS with JS but in this case I think it makes sense. The JS code created the problem in the first place, and the problem will be solved a few lines below in the same file. IMO this is better than solving the problem in a separate CSS file which might be edited by other people who don't know why the .ui-helper-hidden-accessible class was modified that way.

I've been searching forever trying to solve this problem and your solution worked. — Timothy G., Nov 16 '17 at 14:37
Instead of `left: -9999px`, just use `left: 200%` (200% vs. 100% just to account for any possible browser quirks where 100% doesn't *quite* get it off the screen). — jbyrd, Apr 16 '19 at 13:57

How to remove/change JQuery UI Autocomplete Helper text?

10 Answers10

Linked