¿Cómo eliminar / cambiar el texto del Asistente de autocompletar de JQuery UI?

Parece que esta es una característica nueva en JQuery UI 1.9.0, porque usé JQuery UI muchas veces antes y este texto nunca apareció.

No se pudo encontrar nada relacionado en la documentación de la API.

Entonces, usando un ejemplo básico de autocompletar con fuente local

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

Cuando la búsqueda coincide, muestra este texto auxiliar relacionado:

'Hay 1 resultado disponible, use las teclas de flecha hacia arriba y hacia abajo para navegar'.

¿Cómo puedo desactivarlo de una manera agradable, no eliminándolo con los selectores de JQuery?

Sé que esto ha sido respondido, pero solo quería dar un ejemplo de implementación:

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

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

Esto se usa para la accesibilidad, una forma fácil de ocultarlo es con CSS:

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

O (vea el comentario de Daniel a continuación)

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

La respuesta principal aquí logra el efecto visual deseado, pero anula el objetivo de jQuery que tiene soporte ARIA, ¡y es un poco idiota para los usuarios que confían en él! Aquellos que han mencionado que jQuery CSS oculta esto para usted son correctos, y este es el estilo que lo hace:

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

Cópielo en su hoja de estilo en lugar de eliminar el mensaje, por favor :).

Según este blog :

Ahora utilizamos las regiones en vivo de ARIA para anunciar cuándo estarán disponibles los resultados y cómo navegar por la lista de sugerencias. Los anuncios se pueden configurar a través de la opción de mensajes, que tiene dos propiedades: noResults para cuando no se devuelven elementos y resultados para cuando se devuelve al menos un elemento. En general, solo necesitaría cambiar estas opciones si desea que la cadena se escriba en un idioma diferente. La opción de mensajes está sujeta a cambios en versiones futuras mientras trabajamos en una solución completa para la manipulación e internacionalización de cadenas en todos los complementos. Si está interesado en la opción de mensajes, le recomendamos que lea la fuente; el código relevante está en la parte inferior del complemento de autocompletar y solo tiene unas pocas líneas.

...

Entonces, ¿cómo se aplica esto al widget de autocompletar? Bueno, ahora, cuando busque un elemento, si tiene un lector de pantalla instalado, verá algo como "Hay 1 resultado disponible, use las teclas de flecha hacia arriba y hacia abajo para navegar". Bastante bien, ¿eh?

Entonces, si vas a github y miras el código fuente de autocompletar , alrededor de la línea 571 verás dónde está realmente implementado.

La adición de jquery css también funcionó para eliminar el texto instructivo.

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

Dado que esto está ahí por razones de accesibilidad, probablemente sea mejor ocultarlo con CSS.

Sin embargo, sugeriría:

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

Más bien que:

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

Como el primero, ocultará el elemento fuera de la pantalla, pero aún permitirá que los lectores de pantalla lo lean, mientras display:noneque no.

Bueno, esta pregunta es un poco más antigua, pero el texto no aparece en absoluto cuando incluye el archivo css correspondiente:

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

Por supuesto, debe insertar un tema real en lugar de, YOUR_THEME_HEREpor ejemplo, "suavidad".

Ajústelo como el propio tema de jQuery. Muchas de las otras respuestas sugieren incluir una hoja de estilo completa, pero si solo desea el CSS relevante, así es como se hace en 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);
}

Agregar este código justo después de la función de autocompletar en su script empujará al molesto ayudante fuera de la página, pero las personas que usan lectores de pantalla aún se beneficiarán de él:

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

No soy fanático de manipular CSS con JS, pero en este caso creo que tiene sentido. El código JS creó el problema en primer lugar, y el problema se resolverá unas pocas líneas a continuación en el mismo archivo. En mi opinión, esto es mejor que resolver el problema en un archivo CSS separado que podría ser editado por otras personas que no saben por qué se modificó la clase .ui-helper-hidden-access de esa manera.

El archivo jQuery CSS .ui-helper-hidden-access está en el archivo themes / base / core.css. Debe incluir este archivo (como mínimo) en sus hojas de estilo para compatibilidad con versiones posteriores.