Moltes vegades necessitem tenir un bon buscador, que mentre anem escrivint ens doni una
sèrie de resultats dins aquesta cerca. El Framework jquery és el millor per aquests casos. Us mostrem
un exemple molt bo, el jquery.autocomplete.js, el podreu veure amb més exactitud en pàgina:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/.
Us posaré un exemple d'una pàgina que hem fet www.artistaen.com
En aquesta pàgina buscar.php posem el formulari codi:
<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>
Descarreguem l'arxiu i fem 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>
Amb aquest códi 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>
I només necesitem el buscador.php on farem 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);
//Hi ha dades en el deplegable 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@ @ ";
}
?>