1. Tutorial de Autocompletado con jQuery (Ajax), PHP y MySQL

Interesante tutorial (en inglés pero sencillo de entender) que te explica paso a paso como desarrollar tu propio cuadro de sugerencias (ó autocompletado) con jQuery. (demo, descarga)

2. Autocompletado con Mootools

Esta pequeña utilidad crea un cuadro de sugerencia no obstructivo y personalizable haciendo uso de Mootools. Compatible con IE 6+, Opera 9, Firefox 1.5+ y Safari 2+. Cuenta con documentación de cómo usarlo en su misma página web.

3. HOWTO: Usando "Ajax Agent" y PHP para autocompletado

Tutorial que te explica como crear un autocompletado usando el framework Ajax Agent (similar a Prototype, jQuery) y PHP en 2 pasos. (descarga) 

4. Autocompletado Simple con JavaScript

Utilidad hecha solo con JavaScript (no hace uso de Ajax) para crear un autocompletado fácil de entender e implementar. (descarga)

5. Autocompletado con Script.aculo.us

Usando una de las framework mas populares también podemos crear nuestro autocompletado.

6. Autocompletado con Ajax por Robert Nyman

Utilidad lista para usar en nuestros proyectos de la web de Robert Nyman. Esta utlilidad cuenta con documentación para usarlo e implementarlo en nuestro sitio web. (demo)

7. Ajax AutoSuggest / Autocomplete

Utilidad hecha con JavaScript que nos brinda los resultados de la consulta del autocompletado en formato JSON ó XML. Además cuenta con una apariencia agradable y sencilla. Su página web cuenta con documentación para el uso de esta utilidad. (demo, descarga)

8. Autocompletado con Ajax y PHP paso a paso

Interesante utilidad en Ajax vía Sentido Web. (demo, descarga)

9. Tutorial para crear un Autocompletado con Ajax y PHP

Este tutorial te explica de manera simple como implementar tu propio autocompletado de texto. (descarga)

10. ComboBox con autocompletado

Interesante utilidad en forma de lista desplegable, que muestra un cuadro con sugerencias. Por defecto el control <select/> de HTML no permite escribir dentro, solo seleccionar. Este ComboBox  es un alternativa a ello.

 

¿Conoces de otras utilidades para autocompletado de texto? 

LiveValidation es una utilidad en Javascript que permite validar los campos o entradas de textos de los formularios HTML (textarea, input text, input check) en tiempo real. Tiene interesantes características:

• Verifica que un campo no esté vacio.
• Verifica que el texto ingresado corresponda a uno determinado. Si usted exige que el usuario escriba "hola" entonces el validador actuará en función de ello, independientemente de si es con mayúsculas o minúsculas.
• Verifica que cierta palabra aparezca en una expresion ingresada.
  
• Verifica que el texto ingresado solo contenga números, números enteros ó un número específico.
• Verifica que el texto ingresado solo contenga números, pero que éste sea mayor ó menor que cierto valor, ó también verifica que el número corresponda a un valor entre un rango específico.
• Verifica la longitud de caracteres del texto ingresado, puede ser mayor ó menor a cierto valor específico, ó corresponda a un rango específico.
• Verifica que ciertas expresiones ó texto este incluido ó excluido del texto ingresado.
• Verifica que un checkbox este clickeado ó no.
• Verifica que contraseña y confirmanción coincidan (por ejemplo para un formulario de registro.)
• Verifica la estructura de un e-mail (tunickname@servidor.xxx)
• Finalmente todo lo descrito anteriormente lo puede combinar para obtener un validador avanzado.
• Entre otras características muy interesantes.

Cómo usarlo

En la parte del head, agrega el archivo javascript, esto dependerá del tipo de archivo que descarges... en este caso usamos en standalone.

<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>

Luego dentro del body en los campos ó entradas de texto que desees validar, llama a los métodos necesarios. En este ejemplo estamos validando que el campo cuyo id "f1" no quede en blanco.

<input id="f1" type="text">
<script type="text/javascript">
  var f1 = new LiveValidation('f1');
  f1.add(Validate.Presence);
</script>  

En la sección ejemplos del LiveValidation puede encontrar otras formas de uso.

Enlaces | LiveValidation, Documentación

Después de un mes alejado de blog vuelvo con un interesante tema. Aca siempre hablamos de Desarrollo y Programación web, especialmente centrado en Ajax y temas relacionados. Justamente vamos a hablar del corazón de Ajax: el objeto XMLHttpRequest. Éste tiene un problema relacionado con la seguridad cuando tratamos de hacer llamadas a dominios externos con el método open(método,url); Un ejemplo aqui:

function objAjax(){
 var xmlhttp=false;
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");	
  }catch(e){
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(E){
    xmlhttp = false;
   }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function MostrarYahooHomePage(){
 resultado = document.getElementById('resultado');
 ajax=objAjax();
 ajax.open("GET", "http://es.yahoo.com/"); //esta linea  nos interesa
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   resul.innerHTML = ajax.responseText
  }
 }
 ajax.send(null);
}

Este script nos dará un error porque no podemos abrir un documento que se encuentra en otro dominio. Lo apropiado es llamar a documentos que se encuentran en nuestro propio dominio. ¿Cuál es la solución? Existen algunas soluciones (como usar iframe). Pero la que me llamo la atención es la que encuentra en Jaslabs donde explica lo siguiente:

1. Si tenemos nuestro servidor Apache, debemos asegurarnos de instalar o habilitar los módulos: mod_rewrite y proxy.
2. Luego crear la siguiente regla: ^/yahoo_proxy http://www.yahoo.com/service [P] en el archivo .htaccess
3. Ahora reemplazar la linea del método open por la siguiente: http.open("GET"."http://your_host/yahoo_proxy").

No lo he probado aún, pero teniendo en cuenta lo multifacético que es el servidor Apache... se ve funcional. Eso si lo probaré y les contaré...

En el blog de Ryan Scherf encontre un script que hace uso de las librerías prototype y script.aculo.us para generar el efecto de drag & drop sobre achivos que deseamos descargar.

Ver demo

Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.

AjaxRain es una web que muestra una serie de utilidades (ide, librerías, demos, ejemplos, código fuente) sobre Ajax, Javascript y Dhtml; de momento existen 485 utilidades y algo más. Así que si estamos por desarrollar un proyecto usando Javascript ó relacionados, debemos dar un paseo por este site muy bueno.

El control dhtmlxCombo podemos usarlo de 4 modos: como un control desplegable editable, el usuario puede editar un elemento de la lista o agregar uno nuevo; solo lectura, no permite edición; filtrar elementos, para buscar algún elemento en la lista; y autocompletado, mientras agregamos texto nos aparece una lista de elementos como posibles alternativas. Vale resaltar que podemos agregar pequeñas imágenes a los elementos de la lista. Este control trabaja con Ajax y Javascript. Trabaja sobre IE 5 ó superior, Mozilla 1.4 ó superior, Firefox 0.9 o superior y Safari 2.0 ó superior.

Enlaces | Ejemplo con 100000 elementos, Descarga

Sigma Grid es un control datagrid (tabla de datos) elaborado con Ajax / Javascript. Nos permite realizar: edición en línea, navegar por los datos con el teclado, agregar y eliminar datos, ordenar columnas, seleccionar multiples datos, etc. La página principal de esta utilidad indica que trabaja sobre IE y Firefox, pero no indica las versiones específicas. Es una excelente solución, sobre todo profesional, para mostrar y editar los datos de una Base de Datos.

Descargar !

Ahora veremos la parte del servidor. Creamos el archivo conexion.php con los datos de la conexión al tu servidor MySQL, algo así:

<?php
//Configuracion de la conexion a base de datos
$bd_host = "miservidor"; 
$bd_usuario = "miusuario"; 
$bd_password = "micontraseña"; 
$bd_base = "mibasededatos"; 
$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
mysql_select_db($bd_base, $con); 
?>

Vamos con el archivo que realiza la consulta de todos los datos en la tabla tablero: consulta.php

Hacemos referencia (require) al archivo con los datos de la conexión a la base de datos MySQL (conexion.php). Obtenemos la variable GET ultfec (la variable que definimos en JavaScript), si no tiene valor entonces consultamos todos los datos de la tabla tablero caso contrario, si tiene un valor (la ultima fecha que se consultó) entonces solo se consultará la diferencia, osea todos los datos cuya fecha sea mayor a la última.

Ver Artículo Completo ››

Son muchas las solicitudes para mostrar el código fuente del Tablero dinámico, el fisgón (si así desean llamarlo) de este blog, por ello aquí explicaré su funcionamiento desde el registro de la hora, ip y enlace del articulo hasta el efecto de alumbrado o fade de color amarillo y la creación de los divs mediante el manejo del DOM con JavaScript.

Ver Artículo Completo ››