jquery ui autocomplete ajoutant un span

Question

J'utilise l'autocomplétion de jQuery sur un div mais j'obtiens ce span supplémentaire ajouté automatiquement par jquery.

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

Comment puis-je empêcher la création de ce span ?

Answer 1

J'ai résolu le problème en ajoutant une règle CSS :

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

Answer 2

C'est pour des raisons d'accessibilité, les aveugles peuvent "lire" combien de résultats sont trouvés. Si vous voulez vraiment le supprimer, vous pouvez modifier le code source :

this.liveRegion = $( "<span>", {
                role: "status",
                "aria-live": "polite"
            })
            .addClass( "ui-helper-hidden-accessible" )
            .insertAfter( this.element );

Mais ce n'est pas recommandé.

Answer 3

J'utilisais une boîte flexible CSS pour la mise en page avec des sélecteurs nth-child, donc cette portée a déformé la mise en page de ma colonne.

display: none o position: absolute; top: -999999 ne résoudra pas mon problème. J'ai dû supprimer complètement l'élément du DOM, et j'ai donc écrit ce qui suit créer un événement manipulateur :

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}

Answer 4

Vous pouvez vous en débarrasser en ajoutant ce gestionnaire d'événement à votre autocomplétion :

$(element).autocomplete({
    ...
    create: function (e) {
        $(this).prev('.ui-helper-hidden-accessible').remove();
    }
});

Il n'y a pas de mal à le supprimer, sauf si vous vous souciez de l'accès des aveugles à notre page. J'ai essayé le display: none mais ça n'a pas marché pour moi.

Answer 5

Vous ne devriez vraiment pas supprimer cette fonction (voulez-vous naviguer sur une page Web réservée aux aveugles et dont vous ne pouvez pas accéder au contenu ?)

il n'est pas facile de rendre un site web conforme à l'ada. Cette page n'est qu'un tout petit morceau de tout cela.

masquer des éléments avec display none ou autre est une mauvaise pratique au regard de l'ada. c'est pourquoi des pages comme facebook cachent certains éléments en les indentant vers un endroit hors écran :

display:none vs visibility:hidden vs text-indent:9999 Comment le lecteur d'écran se comporte-t-il avec chacun d'eux ?

Pour les questions relatives à l'ADA, vous pouvez commencer ici : http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

peut-être que forcer la hauteur à 0 pourrait être utile dans ce cas...