La finalitat és respondre a les seves sol·licituds i remetre informació del seu interès, també per correu electrònic. Legitimació: consentiment de l´interessat. Destinataris: no hi haurà en cap cas cessió de dades. Drets: podrà retirar el seu consentiment en qualsevol moment, així com accedir, rectificar, suprimir les seves dades i altres drets a soporte@satb2c.net. Informació addicional: poden ampliar la informació a l'enllaç d'Avís Legal.
Imagen Superpuesta

Cercador desplegable en jquery

Cercador desplegable en jquery

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@   @ ";
    }
    ?>