How to remove/change JQuery UI Autocomplete Helper text?

How to remove/change JQuery UI Autocomplete Helper text?

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.


Solution 1:

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

    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}

Solution 2:

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

Solution 3:

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

Solution 4:

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.

Solution 5:

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

 href="" />

Solution 6:

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.