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

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.

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.'
        }
    }
});

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

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

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é.

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" />

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.

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»

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

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.

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.