El plugin autocomplete de jQuery realiza un seguimiento de la información introducida recientemente, como direcciones Web, información de formularios y consultas de búsqueda. A medida que escribes información nueva, autocomplete intentará anticiparse a lo que escribamos y nos ofrecerá posibles coincidencias. Se ahorra tiempo porque no es necesario escribir toda la información: basta con seleccionar la coincidencia del autocomplete.

Primero insertamos las librerías y la hoja de estilo del plugin en el ‘head’:

<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" media="all" />
<script language="javascript" type="text/javascript" src="javascript/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery/jquery.autocomplete.pack.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery/jquery.bgiframe.min.js"></script>

La librería jquery.bgiframe.min.js la ulilizamos para IE6, nos ayuda a posicionar bien las capas, más info aquí.

Vamos a ver dos ejemplos, un campo de búsqueda que hace un ‘scandir’ de un directorio y otro campo de búsqueda que consulta los datos en la base de datos.

A) Scandir de un directorio, insertamos el script en el ‘head’:

<script type="text/javascript">
$().ready(function() {
	$("#monumento").autocomplete("fns/images.php", {
		width: 320,
		max: 4,
		highlight: false,
		scroll: true,
		scrollHeight: 300,
		formatItem: function(data, i, n, value) {
			return "<img src='imagenes/" + value + "'/> " + value.split(".")[0];
		},
		formatResult: function(data, value) {
			return value.split(".")[0];
		}
	});
});
</script>

Y en el ‘body’ insertamos el formulario:

<form action="javascript:void(0);" enctype="application/x-www-form-urlencoded" method="post" id="formulario">
	<label for="monumento">Busca monumento</label><br />
	<input type="text" id="monumento" style="width:200px;" /><br /><br />
</form>

La función que se ejecuta en el fichero images.php es el siguiente:

<?php
$term = $_REQUEST['q'];
$images = array_slice(scandir("../imagenes"), 2);
foreach($images as $value) {
	if( strpos(strtolower($value), $term) === 0 ) {
		echo $value . "\n";
	}
}
?>

B) Consultar campos a la base de datos en un campo de búsqueda:

<script type="text/javascript">
$().ready(function() {
	$("#usuarios").autocomplete("fns/usuarios.php", {
		/************************************************************************************************************
		Valores de configuración del autocomplete que se mandan a usuarios.php
		*************************************************************************************************************/
		minChars: 0, /* El número mínimo de caracteres que un usuario tiene que escribir antes de la autocompletar.*/
		width: 320, /* Anchura del listado de búsqueda, si no se indica la anchura se adaptará al input */
		highlight: false, /* Si se indica 'false' no resaltará los valores de búsqueda */
		scroll: true, /* Si tendrá scroll el campo de búsqueda */
		scrollHeight: 300, /* Altura del scroll en el campo de búsqueda */
		formatItem: function(data, i, n, value) { /* Muestra el valor devuelto se dentro de un elemento LI en la lista de resultados. */
			/************************************************************************************************************
			Listado de valores a seleccionar
			*************************************************************************************************************/
			return value; /* Devuélve el valor de la función usuarios.php */
		},
		formatResult: function(data, value) { /* Similar a formatItem, pero proporciona el formato para el valor, que se pondrán en el campo de entrada. */
			/************************************************************************************************************
			devuelve el valor de la cadena que se ha seleccionado partiendo según el carácrete "["
			*************************************************************************************************************/
			return value.split("[")[0]; /* Inserta en el campo de búsqueda el valor pero separa el contenido 'split' */
		}
	});
});
</script>

Y en el ‘body’ insertamos el formulario:

<form action="javascript:void(0);" enctype="application/x-www-form-urlencoded" method="post" id="formulario">
    <label for="usuarios">Busca nombre</label><br />
    <input type="text" id="usuarios" style="width:200px;" /><br /><br />
</form>

La función que se ejecuta en el fichero usuarios.php es el siguiente:

<?
$term = $_REQUEST['q'];
$link = mysql_connect("localhost", "user","password"); /* Conecto a la base de datos */
mysql_select_db("base_de_datos", $link);  /* Seleccion la base de datos */
$sql="SELECT name, email FROM usuarios WHERE name LIKE '%$term%'";
$result = mysql_query($sql, $link);
while ($fila = mysql_fetch_assoc($result)) {
	echo $fila['name']." [".$fila['email']."]<br />\n ";
}
?>

Importante: el script envía los datos por:

<?
$term = $_REQUEST['q'];
?>

Ejemplo aquí.
También podéis ir a la web del autor y ver más ejemplos de este magnífico plugin.