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


94

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?


1
en que navegador ves esto? ¿Puede ver el mismo cuadro de diálogo en el sitio web de jquery ui?
fuzionpro

2
Nunca he visto esto, ¿es posible que proporcione un violinista o algún código adicional para que podamos investigarlo más?
zmanc

1
para mí, el problema era esa posición: relativa, se anulaba por el intervalo en el que se mostraban las cosas de accesibilidad ... Acabo de agregar "! important" y ahora puedo mantener la accesibilidad
iKode

Tu duda me salvó el tiempo. Por lo tanto, +1 para ti :-)
Ashok kumar

Respuestas:


151

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

4
Intenté esto y pone la cadena "nulo" en el mismo lugar. La solución es cambiar a: noResults: '', y no recibirá ningún mensaje.
Patrick

2
Trabajó para mí sin resultados: ''. Me pregunto por qué no está documentado en api.jqueryui.com
Niels Steenbeek

¿No estás seguro de lo que source: availableTagshace? Lo eliminé y todavía no tenía mensajes.
Chuck Le Butt

3
@Django Reinhardt que se acaba de copiar del ejemplo en la pregunta del OP. La fuente define de dónde provienen los datos de autocompletar. Por ejemplo, availableTagspodría ser una variable local que contenga un objeto JSON de la URL a la asignación de palabras. [{ '/tag/cats': 'Cats', etc... }]Por lo tanto, cuando el usuario escriba CaCats, aparecerá en el menú desplegable y cuando se seleccione o haga clic en, puede completar un campo oculto con la URL, por ejemplo.
TK123

1
Muchas gracias. No se pudo encontrar esto en la documentación de la API.
Chorinator

86

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

5
Como dijiste, se usa para accesibilidad para que las personas con lectores de pantalla puedan entender mejor el widget. Al usar la pantalla: ninguna; también lo escondes de los lectores de pantalla. Mejor moverlo de pantalla con posición: absoluto; izquierda: -999em;
Daniel Göransson

En lugar de left: -9999px, también se puede utilizar left: 200%(200% frente al 100% sólo para la cuenta de los posibles peculiaridades del navegador donde el 100% no bastante conseguirlo fuera de la pantalla).
jbyrd

23

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


1
Actualización de 2019: no use la clippropiedad, ya que ahora está obsoleta; consulte developer.mozilla.org/en-US/docs/Web/CSS/clip
jbyrd

17

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.


11

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

Me funcionó a mi también.
Indika K

4

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.


En lugar de left: -9999px, el uso justo left: 200%(200% frente al 100% sólo para la cuenta de los posibles peculiaridades del navegador donde el 100% no bastante conseguirlo fuera de la pantalla).
jbyrd

2

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


1

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

1

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.


1
He estado buscando por siempre tratando de resolver este problema y su solución funcionó.
Timothy G.

En lugar de left: -9999px, el uso justo left: 200%(200% frente al 100% sólo para la cuenta de los posibles peculiaridades del navegador donde el 100% no bastante conseguirlo fuera de la pantalla).
jbyrd

0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.