Como remover / alterar o texto do JQuery UI Autocomplete Helper?


94

Parece que este é um novo recurso no JQuery UI 1.9.0, porque eu usei o JQuery UI muitas vezes antes e este texto nunca apareceu.

Não foi possível encontrar nada relacionado na documentação da API.

Portanto, usando um exemplo de preenchimento automático básico com fonte local

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

Quando a pesquisa corresponde, ela mostra este texto auxiliar relacionado:

'1 resultado está disponível, use as setas para cima e para baixo para navegar.'

Como posso desativá-lo de uma maneira legal, não removendo-o com seletores JQuery.


1
em qual navegador você vê isso? você pode ver a mesma caixa de diálogo no site jquery ui
fuzionpro

2
Eu nunca vi isso. Você pode fornecer um violinista ou algum código adicional para que possamos analisar melhor?
zmanc

1
para mim, o problema era aquela posição: relativa, estava sendo substituída pelo período em que o material de acessibilidade estava exibindo ... Acabei de adicionar "! importante" e agora posso manter a acessibilidade
iKode

Sua dúvida salvou meu tempo. Portanto, +1 para você :-)
Ashok kumar de

Respostas:


151

Eu sei que isso foi respondido, mas só queria dar um exemplo de implementação:

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

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

4
Tentei fazer isso e coloca a string "null" no mesmo lugar. A solução é mudar para: noResults: '', e você não receberá nenhuma mensagem.
Patrick

2
Funcionou para mim com noResults: ''. Gostaria de saber por que não está documentado em api.jqueryui.com
Niels Steenbeek

Não tem certeza do que source: availableTagsfaz? Eu removi e ainda não tinha mensagens.
Chuck Le Butt

3
@Django Reinhardt que acabou de ser copiado do exemplo da pergunta do OP. A origem define de onde vêm os dados de preenchimento automático. Por exemplo, availableTagspoderia ser uma variável local contendo um objeto JSON de url para mapeamento de palavras. [{ '/tag/cats': 'Cats', etc... }]Então, quando o usuário digitar CaCats, aparecerá no menu suspenso e, quando selecionado ou clicado, pode preencher um campo oculto com a url, por exemplo.
TK123

1
Muito obrigado. Não foi possível encontrar isso na documentação da API.
Chorinator

86

Isso é usado para acessibilidade, uma maneira fácil de esconder é com CSS:

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

Ou (veja o comentário de Daniel abaixo)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

5
Como você disse, ele é usado para acessibilidade para que as pessoas com leitores de tela possam entender melhor o widget. Usando display: none; você também o esconde dos leitores de tela. Melhor movê-lo de tela com posição: absolte; esquerda: -999em;
Daniel Göransson

Em vez de left: -9999px, você também pode usar left: 200%(200% vs. 100% apenas para conta para quaisquer possíveis peculiaridades do navegador, onde 100% não bastante obtê-lo fora da tela).
jbyrd de

23

A melhor resposta aqui atinge o efeito visual desejado, mas derrota o objeto de jQuery com suporte ARIA e é um pouco desagradável para os usuários que confiam nele! Aqueles que mencionaram que jQuery CSS esconde isso para você estão corretos, e este é o estilo que faz isso:

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

Copie isso em sua folha de estilo em vez de remover a mensagem, por favor :).


1
Atualização de 2019: não use a clippropriedade, pois agora está obsoleta - consulte developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd

17

De acordo com este blog :

Agora usamos as regiões ao vivo do ARIA para anunciar quando os resultados ficam disponíveis e como navegar pela lista de sugestões. Os anúncios podem ser configurados por meio da opção de mensagens, que possui duas propriedades: noResults para quando nenhum item é retornado e resultados para quando pelo menos um item é retornado. Em geral, você só precisa alterar essas opções se quiser que a string seja escrita em um idioma diferente. A opção de mensagens está sujeita a alterações em versões futuras enquanto trabalhamos em uma solução completa para manipulação de strings e internacionalização em todos os plug-ins. Se você estiver interessado na opção de mensagens, encorajamos você a apenas ler a fonte; o código relevante está na parte inferior do plug-in de preenchimento automático e possui apenas algumas linhas.

...

Então, como isso se aplica ao widget de preenchimento automático? Bem, agora quando você procura por um item, se você tiver um leitor de tela instalado, ele irá ler algo como “1 resultado está disponível, use as setas para cima e para baixo para navegar”. Muito legal, hein?

Portanto, se você for ao github e olhar o código-fonte do preenchimento automático , em torno da linha 571 verá onde isso está realmente implementado.


11

Adicionar o css jquery também funcionou para remover o texto de instrução.

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

Funcionou para mim também.
Indika K,

4

Como isso está lá por motivos de acessibilidade, provavelmente é melhor ocultá-lo com CSS.

No entanto, eu sugeriria:

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

Ao invés de:

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

Porque o primeiro esconderá o item fora da tela, mas ainda permitirá que os leitores de tela o leiam, enquanto display:nonenão.


Em vez de left: -9999px, uso apenas left: 200%(200% vs. 100% apenas para conta para quaisquer possíveis peculiaridades do navegador, onde 100% não bastante obtê-lo fora da tela).
jbyrd de

2

Bem, esta pergunta é um pouco mais antiga, mas o texto não aparece quando você inclui o arquivo css correspondente:

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

Claro que você deve inserir um tema real em vez de, YOUR_THEME_HEREpor exemplo, "suavidade"


1

Defina como o próprio tema jQuery o define. Muitas das outras respostas sugerem a inclusão de uma folha de estilo inteira, mas se você quiser apenas o CSS relevante, é assim 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);
}

1

Adicionar esse código logo após o preenchimento automático em seu script empurrará o ajudante chato para fora da página, mas as pessoas que usam leitores de tela ainda se beneficiarão com isso:

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

Não sou fã de manipular CSS com JS, mas nesse caso acho que faz sentido. O código JS criou o problema em primeiro lugar, e o problema será resolvido algumas linhas abaixo no mesmo arquivo. IMO, isso é melhor do que resolver o problema em um arquivo CSS separado que pode ser editado por outras pessoas que não sabem por que a classe .ui-helper-hidden-acessível foi modificada dessa forma.


1
Venho procurando sempre tentando resolver este problema e sua solução funcionou.
Timothy G.

Em vez de left: -9999px, uso apenas left: 200%(200% vs. 100% apenas para conta para quaisquer possíveis peculiaridades do navegador, onde 100% não bastante obtê-lo fora da tela).
jbyrd de

0

O jQuery CSS .ui-helper-hidden-acessível está no arquivo themes / base / core.css. Você deve incluir este arquivo (no mínimo) em suas folhas de estilo para compatibilidade futura.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.