Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Suggest Box para dummies

Estas en el tema de Suggest Box para dummies en el foro de Frameworks JS en Foros del Web. Hola gente!!! bueno despues de tanto pedir ayuda por aqui este sera mi primir aporte jejeje aun que soy relativamente un novato usando ajax despues ...
  #1 (permalink)  
Antiguo 01/10/2008, 13:21
Avatar de GreatDanton  
Fecha de Ingreso: mayo-2008
Ubicación: en la 3ra habitacion a la izquierda
Mensajes: 30
Antigüedad: 16 años
Puntos: 0
Suggest Box para dummies

Hola gente!!!

bueno despues de tanto pedir ayuda por aqui este sera mi primir aporte jejeje aun que soy relativamente un novato usando ajax despues de revisar infinidad de códigos para hacer un suggest box [los cuales no entendi ninguno ] pues empece a realizar uno de tal forma que yo lo entendiera y pues a mi parecer esta bastante sencillo a comparación de todos los que hay por la red en fin aquí les dejo mi código espero les sirva


primero el codigo del formulario
Código PHP:

<script language="javascript" src="../../js/suggest.js"></script>
<style type="text/css" media="screen">

.suggest_link {
background-color:#000000;
padding: 2px 6px 2px 6px;
}
            
.suggest_link_over {
background-color: #3366CC;
padding: 2px 6px 2px 6px;
}
            
#mostrar_resultados {
       
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
    font:Verdana, Arial, Helvetica, sans-serif;

}    

</style>

<input type="text" id="txtBuscar" onkeyup="aver();" class="cuadrotexto"  />
<div id="mostrar_resultados" style="display:none;"></div>
------------------ 
ahora la funcion ajax

Código PHP:

function Ajax()
{
    var 
xmlhttp=false;
    try {
            
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (
e){
            try {
                
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (
E){
                    
xmlhttp false;
                }
        }
    if (!
xmlhttp && typeof XMLHttpRequest!='undefined'
    {
        
xmlhttp = new XMLHttpRequest();
    }
    return 
xmlhttp;
}

var 
ajaxObj=Ajax();

function 
aver()
{
    
document.getElementById('mostrar_resultados').innerHTML "";
    var 
texto document.getElementById('txtBuscar').value;
    if(
texto == "")
    {
        
document.getElementById('mostrar_resultados').style.display ='none';
            
document.getElementById('mostrar_resultados').innerHTML "";
        }
        else
        {
            
document.getElementById('mostrar_resultados').style.display ='block';
            
sugerencias('mostrar_resultados');
        }
}

function 
sugerencias(control)
{
        var 
contenedor;
        var 
pagina 'searchSuggest.php?buscar=';
        var 
texto document.getElementById('txtBuscar').value;
        
pagina pagina texto;
        
contenedor document.getElementById(control);
        
ajaxObj=Ajax();
        
ajaxObj.open("GET",pagina,true);
        
ajaxObj.onreadystatechange=function(){
            if(
ajaxObj.readyState==4){
                        var 
cadena ajaxObj.responseText.split("\n");
                        for(
i=0;i<cadena.length-1i++)
                        {
                            var 
nDiv '<div onmouseover="javscript:rata_encima(this)"';
                            
nDiv += 'onmouseout="javascript:suggestOut(this);" ';
                            
nDiv += 'onclick="javascript:setSearch(this.innerHTML);" ';
                            
nDiv += 'class="suggest_link">' cadena[i] + '</div>';
                            
contenedor.innerHTML += nDiv;
                        }
                        
//contenedor.innerHTML =  ajaxObj.responseText;
                    
}
        }
        
ajaxObj.send(null);
}


    function 
rata_encima(div_value) {
        
div_value.className 'suggest_link_over';//Clase definidas en el css
    
}

    function 
rata_afuera(div_value) {
        
div_value.className 'suggest_link';//Clase definida en el css
    
}

    function 
setSearch(value) {
        
document.getElementById('txtBuscar').value value;
        
document.getElementById('mostrar_resultados').innerHTML '';
        
document.getElementById('mostrar_resultados').style.display ='none';
    } 
y por ultimo y no menos importante el codigo php para la consulta
Código PHP:
<?
    
include('../../bd/conexion.php'); 
    
$clase= new ses();  
    
    if(isset(
$_GET['buscar']) && $_GET['buscar'] !='')
    {
        
$str $_GET['buscar']; 
        
$sql "SELECT `sugerencias` FROM `suggests` WHERE `sugerencias` LIKE '$str%' ";

        
$r $clase->Sqlqueryrs($sql);
        while(
$row mysql_fetch_array($r))
        {
            echo 
$row['sugerencias']."\n";
        }    
    }

?>
disculpen que no este comentado el codigo pero es que esta recien salido del horno jejeje

Última edición por GreatDanton; 01/10/2008 a las 14:23
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:56.