
Muchas veces necesitamos tener un buen buscador, que mientras vamos escribiendo nos vaya dando una
serie de resultados a esta búsqueda. El framework jquery es el mejor para estos casos. Os enseñamos
un ejemplo muy bueno, el jquery.autocomplete.js, lo podéis ver con más exactitud en la página
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.
Os voy a poner un ejemplo de una página que acabamos de terminar www.artistaen.com
En la página buscar.php pondremos el formulario código:
<form autocomplete="off" action="buscar.php" name="form_hidden">
<input type="text" id='buscarimatge' name="buscarimatge" >
<input type="hidden" id='idm' name="idm" value="1" >
<div class="button2" onClick="javascript:document.form_hidden.submit();"></div>
</form>
Nos descargamos los archivos y le hacemos un:
<script type='text/javascript' src='autocomplete/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="autocomplete/lib/thickbox.css" />
<script type='text/javascript' src='autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='autocomplete/lib/jquery.ajaxQueue.js'></script>
Con este código javascript :
<script>
jQuery(document).ready(function() {
jQuery("#buscarimatge").autocomplete("buscador.php?var1=<?=$var1?>&var2=<?=$var2?>",
{
extraParams: {
parametros: function() { return true; }
},
width: 178,
max: 30,
highlight: false,
multiple: true,
matchSubset: false,
scroll: true,
scrollHeight: 300,
formatItem: function(data, i, n, value)
{
text_desplegable=value.split("@")[2];
nombre=value.split("@")[1];
return value.split('@')[0] + text_desplegable + '<font color="#ffffff" > <b>- ' + cuadro + '</b></font> </a></span><br><b>...'+jQuery('#buscarimatge').val()+'</b>';
},
formatResult: function(data, value)
{
cadena=value.split("@")[1]+" "+value.split("@")[2];
caracter = ",";
cadena=value.split("@")[1]+","+value.split("@")[2];
value.split("@")[1];
return cadena;
}
});
}
);
</script>
Y solo necesitamos el buscador.php donde haremos una consulta:
<?
header( 'Content-type: text/html; charset=iso-8859-1' );
import_request_variables("gP");
session_start();
include("conexion_base_datos.inc");
$i=0;
$resultats=0;
$q=utf8_decode($q);
//Hay datos en los desplegables del buscador
$sql="SELECT * from tabla where var1 like '%".$q."%' );";
$sql_exec=mysql_query($sql,$link);
$sql_exec=mysql_query($sql,$link);
while($resultado=mysql_fetch_array($sql_exec))
{
$variable1=$resultado["nombre"];
$variable2=$resultado["apellido"];
?>
<? echo "<img src='images/admin/".$foto."' width='32' height='32'> "."@".$variable1."@".$variable2."@"?>
<?
}
if ($resultats==0)
{
echo "<img src='images/none.png' width='32' height='32'> "."@ Sin Resultados@ @ ";
}
?>