Finalidades: responder a sus solicitudes y remitirle información comercial de nuestro servicio, incluso por correo electrónico. Legitimación: consentimiento del interesado. Destinatarios: no están previstas cesiones de datos. Derechos: puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en soporte@satb2c.net. Información adicional: puede ampliar la información en el enlace de Aviso Legal.
Imagen Superpuesta

Buscador desplegable en jquery

Buscador desplegable en jquery

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