web-dev-qa-db-fra.com

Comment supprimer / modifier le texte d'assistance automatique JQuery UI?

Il semble que ce soit une nouvelle fonctionnalité de JQuery UI 1.9.0, car j’ai utilisé JUuery ​​UI de nombreuses fois auparavant et que ce texte n’a jamais été affiché.

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

Donc, en utilisant un exemple d'auto-complétion de base avec une source locale

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

Lorsque la recherche correspond, le texte d'assistance correspondant est affiché:

"1 résultat est disponible, utilisez les flèches haut et bas pour naviguer."

Comment puis-je le désactiver de manière agréable, sans le supprimer avec les sélecteurs JQuery.

javascriptjqueryjquery-uiautocomplete
93
user1236048

Je sais que cela a été répondu, mais je voulais juste donner un exemple d'implémentation:

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
149
TK123

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

La meilleure réponse ici réalise l'effet visuel souhaité, mais détruit l'objet de jQuery ayant le support ARIA, et est un peu difficile pour les utilisateurs qui en dépendent! Ceux qui ont mentionné que jQuery CSS cache cela, c'est correct, et c'est le style qui le fait:

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

22
Mike Campbell

Selon ce blog :

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

...

Alors, comment cela s'applique-t-il au widget autocomplete? 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 flèches haut et bas pour naviguer.". Assez cool, hein?

Donc, si vous allez dans github et regardez le code source à remplissage automatique , à la ligne 571, vous verrez où cela est réellement implémenté.

17
j08691

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

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

Comme cela 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 masque l’élément hors écran, tout en permettant aux lecteurs d’écran de le lire, alors que display:none ne fait pas.

4
Neil Sayers

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_HERE par exemple. "douceur"

2
Markus W Mahlberg

L'ajout de ce code juste après la saisie semi-automatique dans votre script repoussera l'assistant ennuyeux en dehors de la page, mais les utilisateurs de lecteurs d'écran en bénéficieront tout de même:

$(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 un partisan 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 plus bas dans le même fichier. Cela vaut mieux, à l’OMI, que de résoudre le problème dans un fichier CSS séparé, 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.

1
Bruno 82

Décorez-le de la même manière que le thème jQuery. Beaucoup d'autres réponses suggèrent d'inclure une feuille de style complète, mais si vous voulez juste le CSS correspondant, c'est comme cela que vous faites en 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);
}
0
dKen

Le fichier 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é en aval.

0
paulz