Unidad 23. Widgets de jQuery (VI)


23.6. Autocomplete

 

Autocomplete permite insertar en un formulario un campo de texto con valores predefinidos que se irán mostrando conforme el usuario teclee en él.

En este ejemplo hemos creado una lista de los estados de México. Comienza pulsando cualquier tecla y el widget irá ofreciendo resultados que se filtrarán conforme añadamos letras.

Escribe aquí:

Observa que conforme añadimos texto en el campo el resultado se va filtrando. También podemos seleccionar un valor para el campo de la lista con el ratón o el teclado. A su vez, los caracteres introducidos no necesariamente deben coincidir con el inicio de algún elemento de la lista. Es decir, si pulsamos una letra, se mostrarán todos los elementos de la lista que la contengan, sin importar su posición.

Las propiedades del widget que aparecen en el Inspector de propiedades podemos verlas enseguida.

En la propiedad Source indicamos la lista de valores que mostrará el campo para el efecto de autocompletarse. Dicha lista debe estar en el formato ["a","b","c","d"]. También es posible indicar datos de fuentes externas, lo que permitiría extensas listas de datos, pero requiere un script en PHP para la consulta de una base de datos. Si la cantidad de información es limitada, como en este ejemplo, entonces podemos indicarla en Source.

Por su parte, en el campo Min. Length se establece el número mínimo de caracteres necesarios que debe pulsar el usuario para que el widget comience a ofrecer resultados. Si indicamos el número dos, entonces no mostrará la lista hasta que se cumpla ese requisito.

La propiedad Delay establece el retardo en milisegundos para que la lista aparezca después de cumplirse el requisito de la propiedad anterior.

La propiedad Append establece la etiqueta o identificador (ID) al que se ha unido el widget. Normalmente, debe de tratarse del ID de un formulario.

La casilla Auto Focus lleva el cursor al primer resultado de la lista para una selección rápida.

Finalmente, las últimas tres listas desplegables determinan la posición de la lista respecto al campo y su comportamiento si existe desbordamiento respecto a la ventana del navegador. Por lo general, las listas deben aparecer debajo del campo y con barras de desplazamiento si hay desbordamiento, pero eso depende de la cantidad de elementos de la lista.

Para practicar realiza el ejercicio paso a paso Uso del Widget de jQuery Autocomplete.

 

23.7. Slider

 

El widget Slider ofrece un control simple en forma de banda que puede moverse con el cursor para establecer un valor numérico en un formulario o una aplicación web (control de volumen)

Sus opciones en el Inspector de propiedades son las siguientes.

Las propiedades a establecer son.

Podemos ver varios ejemplos de su uso para establecer valores máximos y mínimos en la página oficial de jQuery UI, aquí.


Marzo-2015
Pág. 23.6
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.