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

Il semble que ce soit une nouvelle fonctionnalité dans JQuery UI 1.9.0, parce que j'ai utilisé JQuery UI beaucoup de fois avant et ce texte n'a jamais surgi.

N'a rien trouvé de lié à la documentation de L'API.

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

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

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

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

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

92
demandé sur alex.dominte 2012-10-22 16:07:24

10 réponses

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: '',
        results: function() {}
    }
});
148
répondu TK123 2013-02-19 11:12:38

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; }
76
répondu Bema 2014-02-27 16:34:18

La meilleure réponse ici atteint l'effet visuel désiré, mais défait l'objet de jQuery ayant le support ARIA, et est un peu dickish pour les utilisateurs qui comptent sur elle! Ceux qui ont mentionné que jQuery CSS cache cela pour vous sont corrects, 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, veuillez:).

19
répondu Mike Campbell 2013-09-05 13:58:02

Selon ce blog:

Nous utilisons maintenant Aria LIVE regions pour annoncer quand les résultats seront disponibles et comment naviguer dans la liste des suggestions. Annonce peut être configuré via l'option messages, qui a deux propriétés: noResults lorsque des éléments sont retournés et les résultats lorsque l'une au moins un article est retourné. En général, vous n'aurez qu'à modifier ces options si vous voulez que la chaîne soit écrite dans une langue différente. Le l'option messages est sujette à changement dans les versions futures pendant que nous travailler sur une solution complète pour la manipulation de chaînes et internationalisation à travers tous les plugins. Si vous êtes intéressé dans le messages option, nous vous encourageons à simplement lire la source; le le code pertinent est tout en bas du plugin de saisie semi-automatique et est seulement quelques lignes.

...

Alors, comment cela s'applique-t-il au widget de saisie semi-automatique? Bien, maintenant, quand vous rechercher un élément, si vous avez un écran lecteur installé il va lire vous quelque chose comme " 1 résultat est disponible, utilisez les touches fléchées haut et bas naviguer.". Plutôt cool, hein?

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

16
répondu j08691 2016-03-18 09:56:32

L'ajout du css jquery a également fonctionné pour supprimer le texte d'instruction.

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
10
répondu user2708344 2013-08-22 17:24:12

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

Cependant, je suggère: 

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

Plutôt que: 

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

Comme le premier cachera l'élément hors écran, mais permettra toujours aux lecteurs d'écran de le lire, alors que display:none ne le fait pas.

4
répondu Neil Sayers 2013-06-11 14:39:50

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
répondu Markus W Mahlberg 2013-08-02 18:03:31

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 manipuler CSS avec JS mais dans ce cas, je pense que cela a du sens. Le code JS créé le problème en premier lieu, et le problème sera résolu en quelques lignes ci-dessous dans le même fichier. IMO c'est mieux que de résoudre le problème dans un fichier CSS séparé qui pourrait être édité par d'autres les gens qui ne savent pas pourquoi .ui-helper-hidden-accessible classe a été modifiée de cette façon.

1
répondu Bruno 82 2017-07-21 14:19:28

Stylez-le 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 cela se fait dans 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
répondu dKen 2015-03-06 09:14:59

Le CSS jQuery .ui-helper-caché-est accessible dans les thèmes/base/core.fichier css. Vous devez inclure ce fichier (au minimum) dans vos feuilles de style pour une compatibilité directe.

0
répondu paulz 2017-01-24 18:10:17