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.
