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

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.

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

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

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

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.

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

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.

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"

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

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.

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.