Comment supprimer / modifier le texte de l'aide à la saisie semi-automatique de l'interface utilisateur JQuery?

94

Il semble que ce soit une nouvelle fonctionnalité dans JQuery UI 1.9.0, car j'ai utilisé JQuery UI de nombreuses fois auparavant et ce texte n'est jamais apparu.

Impossible de trouver quoi que ce soit dans la documentation de l'API.

Donc, en utilisant un exemple de saisie semi-automatique de base avec une source locale

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

Lorsque la recherche correspond, elle affiche ce texte d'aide associé:

"1 résultat est disponible, utilisez les touches fléchées haut et bas pour naviguer."

Comment puis-je le désactiver d'une manière agréable, pas en le supprimant avec les sélecteurs JQuery.

user1236048
la source
1
dans quel navigateur voyez-vous cela? pouvez-vous voir la même boîte de dialogue sur le site Web de jquery ui
fuzionpro
2
Je n'ai jamais vu cela, pouvez-vous fournir un violoneux ou du code supplémentaire pour que nous puissions l'examiner davantage?
zmanc
1
pour moi, le problème était que la position: relative, était remplacée pour la durée sur laquelle les éléments d'accessibilité étaient affichés ... Je viens d'ajouter "! important" et maintenant je peux conserver l'accessibilité
iKode
Votre doute m'a fait gagner du temps. Donc +1 pour vous :-)
Ashok kumar

Réponses:

151

Je sais que cela a été répondu mais je voulais juste donner un exemple de mise en œuvre:

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});
TK123
la source
4
J'ai essayé ceci et il met la chaîne "null" au même endroit. La solution est de passer à: noResults: '', et vous n'obtiendrez aucun message.
Patrick
2
A travaillé pour moi avec noResults: ''. Je me demande pourquoi ce n'est pas documenté sur api.jqueryui.com
Niels Steenbeek
Vous ne savez pas ce que source: availableTagsça fait? Je l'ai supprimé et je n'avais toujours aucun message.
Chuck Le Butt
3
@Django Reinhardt qui vient d'être copié de l'exemple dans la question du PO. La source définit la provenance des données de saisie semi-automatique. Par exemple, il availableTagspeut s'agir d'une variable locale contenant un objet JSON de mappage url-mot.Ainsi [{ '/tag/cats': 'Cats', etc... }], lorsque l'utilisateur tape les Cachats, il apparaîtra dans la liste déroulante et, lorsqu'il est sélectionné ou cliqué, il peut remplir un champ masqué avec l'URL par exemple.
TK123
1
Merci beaucoup. Impossible de trouver cela dans la documentation de l'API.
Chorinator le
86

Ceci est utilisé pour l'accessibilité, un moyen facile de le cacher est avec CSS:

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

Ou (voir le commentaire de Daniel ci-dessous)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }
Bertrand
la source
5
Comme vous l'avez dit, il est utilisé pour l'accessibilité afin que les utilisateurs de lecteurs d'écran puissent mieux comprendre le widget. En utilisant l'affichage: aucun; vous le cachez également des lecteurs d'écran. Mieux vaut le déplacer d'écran avec position: absolte; à gauche: -999em;
Daniel Göransson le
Au lieu de left: -9999px, vous pouvez également utiliser left: 200%(200% contre 100% juste pour tenir compte des éventuelles bizarreries du navigateur où 100% ne le fait pas tout à fait sortir de l'écran).
jbyrd
23

La meilleure réponse ici permet d'obtenir l'effet visuel souhaité, mais va à l'encontre de l'objet de jQuery prenant en charge ARIA, et est un peu idiot pour les utilisateurs qui en dépendent! Ceux qui ont mentionné que jQuery CSS cache cela pour vous ont raison, et c'est le style qui fait cela:

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

Copiez-le dans votre feuille de style au lieu de supprimer le message, s'il vous plaît :).

Mike Campbell
la source
1
Mise à jour 2019: n'utilisez pas la clippropriété, car elle est maintenant obsolète - voir developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd
17

D'après ce blog :

Nous utilisons désormais les régions ARIA live pour annoncer la disponibilité des résultats et comment naviguer dans la liste des suggestions. Les annonces peuvent être configurées via l'option messages, qui a deux propriétés: noResults lorsque aucun élément n'est renvoyé et les résultats lorsque au moins un élément est renvoyé. En général, vous ne devez modifier ces options que si vous souhaitez que la chaîne soit écrite dans une autre langue. L'option des messages est sujette à changement dans les versions futures pendant que nous travaillons sur une solution complète pour la manipulation de chaînes et l'internationalisation sur tous les plugins. Si vous êtes intéressé par l'option des messages, nous vous encourageons à simplement lire la source; le code pertinent se trouve tout en bas du plugin de saisie semi-automatique et ne fait que quelques lignes.

...

Alors, comment cela s'applique-t-il au widget de saisie semi-automatique? Eh bien, maintenant, lorsque vous recherchez un élément, si vous avez un lecteur d'écran installé, il vous lira quelque chose comme "1 résultat est disponible, utilisez les touches fléchées haut et bas pour naviguer.". Assez cool, hein?

Donc, si vous allez sur github et regardez le code source de la saisie semi - automatique , autour de la ligne 571, vous verrez où cela est réellement implémenté.

j08691
la source
11

L'ajout du css jquery a également permis de supprimer le texte d'instructions.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
user2708344
la source
A travaillé pour moi aussi.
Indika K
4

Comme c'est là pour des raisons d'accessibilité, il est probablement préférable de le cacher avec CSS.

Cependant, je suggérerais:

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

Plutôt que:

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

Comme le premier masquera l'élément hors de l'écran, mais permettra toujours aux lecteurs d'écran de le lire, alors que ce display:nonen'est pas le cas.

Neil Sayers
la source
Au lieu de left: -9999px, utilisez simplement left: 200%(200% contre 100% juste pour tenir compte des éventuelles bizarreries du navigateur où 100% ne le fait pas vraiment sortir de l'écran).
jbyrd
2

Eh bien, cette question est un peu plus ancienne, mais le texte n'apparaît pas du tout lorsque vous incluez le fichier css correspondant:

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

Bien sûr, vous devez insérer un thème réel au lieu de YOUR_THEME_HEREpar exemple «douceur»

Markus W Mahlberg
la source
1

Donnez-lui un style comme le thème jQuery lui-même le stylise. Beaucoup d'autres réponses suggèrent d'inclure une feuille de style entière, mais si vous voulez juste le CSS pertinent, voici comment procéder 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);
}
dKen
la source
1

L'ajout de ce code juste après la saisie semi-automatique dans votre script poussera l'assistant ennuyeux hors de la page, mais les personnes utilisant des lecteurs d'écran en bénéficieront toujours:

$(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
});

Je ne suis pas fan de la manipulation de CSS avec JS mais dans ce cas, je pense que cela a du sens. Le code JS a créé le problème en premier lieu, et le problème sera résolu quelques lignes ci-dessous dans le même fichier. OMI, c'est mieux que de résoudre le problème dans un fichier CSS distinct qui pourrait être modifié par d'autres personnes qui ne savent pas pourquoi la classe .ui-helper-hidden-accessible a été modifiée de cette façon.

Bruno 82
la source
1
Je cherche depuis toujours pour essayer de résoudre ce problème et votre solution a fonctionné.
Timothy G.
Au lieu de left: -9999px, utilisez simplement left: 200%(200% contre 100% juste pour tenir compte des éventuelles bizarreries du navigateur où 100% ne le fait pas vraiment sortir de l'écran).
jbyrd
0

Le jQuery CSS .ui-helper-hidden-accessible se trouve dans le fichier themes / base / core.css. Vous devez inclure ce fichier (au minimum) dans vos feuilles de style pour une compatibilité ascendante.

paulz
la source