« anterior | siguiente »

Home > 2006 > Mayo > Jueves, 18 de Mayo 2006 > AJAX paso a paso: autocompletado en cajas de texto
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Jue18May2006

AJAX paso a paso: autocompletado en cajas de texto

15:31 H (CET)| Temas: AJAX · Especiales · Javascript · PHP

Hace ya tiempo escribí en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podía realizar mediante AJAX. Hoy vamos a explicar cómo se haría esa llamada mediante AJAX. ajax-autocompletado.png

No nos vamos a centrar en cómo mostrar la lista desplegable, ya que eso está bien explicado (o eso creo) en la entrada del otro blog. Vamos a decir como obtener los datos mediante AJAX y no mediante Javascript como se hacía antes.

Los datos del ejemplo que se van a mostrar (paises) están disponibles en un array, aunque se debería hacer mediante consultas a una base de datos.

En la versión Javascript, la función inputFilling es la que se encarga de ver que tecla se pulsa y si la tecla modifica el texto escrito en la caja de texto, calculaba que elementos se debían desplegar en la lista. En la versión AJAX, vamos a sacar dos partes de esta función, la que calcula los elementos que se deben mostrar y la que dibuja la lista de desplegable. Esto es necesario porque la lista se va a obtener mediante una llamada AJAX y porque una vez obtenida la lista, se tiene que pintar.

La llamada AJAX se realiza mediante la siguiente función (la creación del objeto AJAX es la misma de siempre):

  // obj es el elemento HTML que va a contener la lista
  // txt es el texto que se ha escrito en la caja
  function cargaLista(obj, txt) {
    ajax = ajaxobj();
	// Se habre el canal asincrono
    ajax.open("GET", "paises.php?texto="+txt, true);
    ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
	    // Obtenemos los datos del script en un XML, un elemento "pais" por cada pais encontrado
        var datos = ajax.responseXML;
        var paises = datos.getElementsByTagName("pais");
        
        // Nos creamos un array con cada uno de los paises obtenidos
		var listaPaises = new Array();
        if (paises) {
          for (var i=0; i<paises.length; i++) {
            listaPaises[listaPaises.length] = paises[i].firstChild.data;
          }
        }
		// Llamamos a la función que crea la lista desplegable
        escribeLista(obj, listaPaises);
      }
    }
    ajax.send(null);
  }

El script que devuelve los paises es muy sencillo, crea un XML que contiene aquellos paises que empiecen por el texto que se manda como parámetro:

<?php
  // Paises
  $datos[count($datos)] = "Afganistan";
  ...
  $datos[count($datos)] = "Zimbabwe";

  $texto = $_GET["texto"];
  
  // Devuelvo el XML con la palabra que mostramos (con los '_') y si hay éxito o no
  $xml  = '<?xml version="1.0" standalone="yes"?>';
  $xml .= '<datos>';
  foreach ($datos as $dato) {
    if (strpos(strtoupper($dato), strtoupper($texto)) === 0 OR $texto == "") {
      $xml .= '<pais>'.$dato.'</pais>';
    }
  }
  $xml .= '</datos>';
  header('Content-type: text/xml');
  echo $xml;
?>

Demo

Podéis bajaros el código aquí

Relacionados

Feedback (9) » Formulario

1. Lilian Camargo ~ Jueves, 28 Jun 2007 | 20:47H:

Gracias. Muy buen codigo

2. Karen Medina ~ Miércoles, 12 Sep 2007 | 20:01H:

Excelente el codigo, lo utilice sin ningun problema.

3. rafael ~ Miércoles, 14 Nov 2007 | 17:47H:


yo necesito hacer lo mismo pero yo tengo un cuadro de lista despleglabe de html y en este cuadro quiero implementar el autocompletar!!

alguien podria decirme como hacerle o darme alguna Idea?

gracias y saludos!!!

4. sheyla ~ Martes, 15 Abr 2008 | 12:06H:

Pero os va? me he bajado el codigo y no me va

5. alberto ~ Viernes, 25 Abr 2008 | 20:17H:

te felicito por el codigo, esta muy bueno, me funciona perfectamente pero quiero consultarte cual es el campo con el valor ingresado en el autocompletar para enviarlo con submit a la base de datos

6. vava ~ Jueves, 08 May 2008 | 19:42H:

Buenas tardes muy bue ejemplo a este ejemplo si quisera agregar un boton sbmit pra enevair los datos a una bd como podria hacerlo?
espero tu respuesta gracias

7. stella ~ Sábado, 10 May 2008 | 07:23H:

chevere codigo, pero como hago para jsp ya q eso es lo q uso en q parte del codigo varia?? porfis

8. Carolina ~ Miércoles, 25 Jun 2008 | 16:52H:

Excelente el codigo muy facil de implementar!

9. Juan ~ Miércoles, 30 Jul 2008 | 17:21H:

Excelente ejemplo, muy entendible, hice unos cambios para que las sugerencias fueran con base en la informacion contenida en una base de datos.

Muchas gracias.

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)