Ejemplo de Formulario con listas dinámicas en Ajax.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este simple pero interesante ejemplo a la vez, te permite implementar en tu aplicación o página web, un formulario con listas dinámicas.

Es ideal para formularios por ejemplo que necesiten dar la opción al usuario de seleccionar países, ciudades, y otros tipos de datos. Al hacer clic en el campo de formulario, automáticamente se desplegará una lista cargada de valores para que pueda elegir.

Por supuesto puede ser utilizado para muchos otros casos, por ejemplo para desplegar un catálogo de productos de un portal o tienda online, donde dichos productos se almacenan en una base de datos. ( El ejemplo que incluye en el archivo de descarga, utiliza PHP y base de datos MySQL)

Nota: Este script es completamente gratis y de libre uso, disponible para utilizar e insertar en cualquier página web sin ninguna limitación. ( se ditribuye como software libre con licencia LGPL)

A continuación puedes ver mas información.

Mas información sobre el programa.

Indice - Contenido.

  1. Descripción general del ejemplo Ajax.
  2. Cómo instalar el script y el formulario web.
  3. Configuración de variables Javascript.
  4. Configuración del archivo externo Ajax (ajax-list-countries.php)
  5. Más información sobre el ejemplo.

 

1 - Descripción general del ejemplo Ajax.

Este script muestra una lista de opciones basadas en lo que se escribe en un campo de entrada de texto.

Por ejemplo, al escribir la letra "A", el ejemplo en Ajax desplegará una lista de todos los países que comiencen con la letra "A".

Vista previa del formulario que se incluye junto con el archivo de descarga.

2 - Cómo instalar el script y el formulario web.

En el archivo de descarga, hay varios ficheros y scripts.

create-countries.php, se utiliza para crear los países utilizados en el ejemplo. Antes de ejecutar este archivo en el navegador, recuerda que antes se debe crear una base de datos y color los datos correctos en mysql_connect () y mysql_select_db () en la parte superior o encabezado de este archivo.

Vista previa del archivo:

Para aplicar el script al campo de formulario, se debe añadir al evento onKeyUp la siguiente entrada:

<input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)">

La función ajax_showOptions contiene tres argumentos o parámetros.

El primero debe ser siempre "this", es decir, una referencia al campo de texto. El segundo es una cadena que se envía al archivo en el servidor. Esto es útil en caso de que la aplicación de esta función para el campo de texto a más de uno. Si lo hace, esta cadena se podría comprobar en el servidor. El último argumento es siempre un evento.

 

3 - Configuración de variables Javascript.

Hay cuatro variables de JavaScript en la parte superior del archivo AJAX_dinamic_content.js que se pueden modificar:

  • ajaxBox_offsetX = Posición x de la lista desplegable.
  • ajaxBox_offsetY = Posición y de la lista desplegable.
  • ajax_list_externalFile = Path o ruta del archivo Ajax. Este es el archivo que envía el contenido de vuelta al script.
  • minimumLettersBeforeLookup = Este parámetro define cuántas letras deberá escribir el usuario antes de que la búsqueda se lleve a cabo.

4 - Configuración del archivo externo Ajax (ajax-list-countries.php)

Este archivo externo retorna a nuestro script la lista de opciones y artículos. Los elementos de lista se generan con el siguiente formato, por ejemplo:

Cada elemento es separado por un caracter Pipe "|".

1###Elemento 1|2###Elemento 2|3###Elemento 3|4###Elemento 4.

5 - Más información sobre el ejemplo.

Para más información puedes hacer clic aquí en la página del autor.


Requerimientos de instalación y uso.

Requiere :Ver requerimientos en la web del autor o archivo de descarga.


Videos tutoriales.

No hay video tutoriales disponibles para mostrar.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://www.dhtmlgoodies.com
Licencia:
Gratis - Software libre
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: