How to remove/change JQuery UI Autocomplete Helper text?
JavascriptJqueryJquery UiAutocompleteJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.'
}
}
});
Solution 2 - Javascript
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 - Javascript
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 - Javascript
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 - Javascript
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" />
Solution 6 - Javascript
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.
Solution 7 - Javascript
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"
Solution 8 - Javascript
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);
}
Solution 9 - Javascript
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.
Solution 10 - Javascript
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.