Busqueda Instantanea

[Master_raven]

Buenas, quisiera hacer una busqueda instantanea, es decir que al momento que vallas escribiendo te valla mostrando los resultados algo asi



esto es lo que e logrado hasta ahora

Código Javascript:

function BuscaDatDep(Ext,Bus,Div,Acc){
        resul = document.getElementById(Div);
        
        data="Acc=" + Acc + "&Bus=" + Bus + "&Ext=" + Ext;
        document.getElementById('Res01').style.display = "block";
 
        ajax=NuevoAjax();
        ajax.open("POST", "_php/NewBusca.php",true);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        resul.innerHTML = ajax.responseText
                }
        }
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(data)
}
 

Código HTML:

<table border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>Nivel Academico</td>
    <td><select name="ac" class="SelectInformacion">
        <option value="0">Selecciona una Opcion</option>
        <option value="1">Primaria</option>
        <option value="2">Basicos</option>
        <option value="3">Diversificado</option>
        <option value="4">Universitario</option>
    </select></td>
  </tr>
    <td>Departamento&nbsp;&nbsp;</td>
    <td><input type="text" name="depto" class="CajaInformacion"  maxlength="128" onkeypress="BuscaDatDep('GTM',this.value,'Res01','Depto')" />
 <div id='Res01' class="StyleDisplay"></div>   
    </td>
  </tr>  
</table>
 

Código CSS:

.StyleDisplay {
    position: absolute; 
    background:#b6b6b6;
    display:none;
    z-index: 500;
    width: 300px;
    border:#cccccc 1px solid;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -webkit-border-bottom-left-radius:8px;
    -webkit-border-bottom-right-radius:8px; 
}
 

Código PHP:

<?php
include_once "../../includes/DBAconfig.php";
$Enlace = Conectar();
 
if (isset($_POST['Acc']) && $_POST['Acc']=="Depto") {
    $Ext = $_POST['Ext'];
    $Bus = $_POST['Bus'];
    
$Respuesta = mysql_query("SELECT * FROM `q_depto` WHERE `ps_cod` = '$Ext' AND `name` LIKE '$Bus%' LIMIT 4",$Enlace);
 
    if (mysql_num_rows($Respuesta)!==0) {
        while ($Rows = mysql_fetch_array($Respuesta)) {
            echo "&nbsp;&nbsp;&nbsp;<a href=\"javascript:Cinfo('" . $Rows['name'] . "');\" title='Click para seleccionar'>" . $Rows['name'] . "</a><br />";
        }
    } else {
        echo "&nbsp;&nbsp;&nbsp;Sin Resultados";
    }
}
 
if (isset($_POST['Acc']) && $_POST['Acc']=="Muni") {
    $Ext = $_POST['Ext'];
    $Bus = $_POST['Bus'];
    
$Respuesta = mysql_query("SELECT * FROM `q_depto` WHERE `ps_cod` = '$Ext' AND `name` LIKE '$Bus%' LIMIT 4",$Enlace);
 
    if (mysql_num_rows($Respuesta)!==0) {
        while ($Rows = mysql_fetch_array($Respuesta)) {
            echo "&nbsp;&nbsp;&nbsp;<a href=\"javascript:Cinfo('" . $Rows['name'] . "');\" title='Click para seleccionar'>" . $Rows['name'] . "</a><br />";
        }
    } else {
        echo "&nbsp;&nbsp;&nbsp;Sin Resultados";
    }
}
?>
 

Bueno lo que quiero es mejorarlo y se que ustedes me ayudaran
si ay algun escrip ya echo les agradeceria me lo mensionaran

Si alguien lo necesita o le puede servir asi como esta me lo puede pedir y yo les mando una copia :)

[lexus]

yo busco exactamente lo mismo pero en asp.
algun ejemplo sugerido?

[eyerena]

Mi propuesta amigo, es que usaras alguna libreria como prototype y script.aculo.us, o quiza jquery y un plugin, solo para agregar, lo que tu buscas se llama autocompletar.

[Master_raven]

Buscando encontre este, esta muy chulo asi que decidi entrarle :)

Código HTML:

<script type="text/javascript" src="js/bsn.AutoSuggest_2.1.3.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
 
 
<h3>Ejemplo de autobusqueda</h3>
 
<div><input type="hidden" id="testid" />
    Person : <input type="text" id="testinput_xml" value="" style="width:300px" /> 
 
</div>
 
 
<script type="text/javascript">
    var options = {
        script:"test.php?json=true&limit=6&",
        varname:"input",
        json:true,
        shownoresults:false,
        maxresults:6,
        callback: function (obj) { document.getElementById('testid').value = obj.id; }
    };
    var as_json = new bsn.AutoSuggest('testinput', options);
    
    
    var options_xml = {
        script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; },
        varname:"input"
    };
    var as_xml = new bsn.AutoSuggest('testinput_xml', options_xml);
</script>
 

y el php esta asi

Código PHP:

<?php
    $aUsers = array(
        "Ädams, Egbert",
        "Altman, Alisha",
        "Archibald, Janna",
        "Auman, Cody",
        "Bagley, Sheree",
        "Ballou, Wilmot",
        "Bard, Cassian",
        "Bash, Latanya",
        "Beail, May",
        "Black, Lux",
        "Bloise, India"
    );
    
    $aInfo = array(
        "Bedfordshire",
        "Buckinghamshire",
        "Cambridgeshire",
        "Cheshire",
        "Cornwall",
        "Cumbria",
        "Derbyshire",
        "Devon", 
        "Dorset", 
        "Durham"
    );
    
    
    $input = strtolower( $_GET['input'] );
    $len = strlen($input);
    $limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;
    
    
    $aResults = array();
    $count = 0;
    
    if ($len) {
        for ($i=0;$i<count($aUsers);$i++) {
            if (strtolower(substr(utf8_decode($aUsers[$i]),0,$len)) == $input)          {
                $count++;
                $aResults[] = array( "id"=>($i+1) ,"value"=>htmlspecialchars($aUsers[$i]), "info"=>htmlspecialchars($aInfo[$i]) );
            }
            
            if ($limit && $count==$limit)
                break;
        }
    }
    
    
    
    
    
    header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
    header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
    header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header ("Pragma: no-cache"); // HTTP/1.0
    
    
    
    if (isset($_REQUEST['json'])) {
 
    } else {
        header("Content-Type: text/xml");
 
        echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?><results>";
        for ($i=0;$i<count($aResults);$i++)
        {
            echo "<rs id=\"".$aResults[$i]['id']."\" info=\"".$aResults[$i]['info']."\">".$aResults[$i]['value']."</rs>";
        }
        echo "</results>";
    }
?>
 

que tengo que editar para sustituir esos array por una busqueda en mi bace de datos

[patiurco]

Hola podrias mandarme una copia de tu codigo al siguiente correo: [email protected]
te lo agradeceria mucho.