Campo de texto , efecto google y foros del web

[SirDuque]

SOLUCION:

index.php

Código PHP:

<script type="text/javascript" src="lib/ajax_framework.js"></script>
<style type="text/css">
#search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;}
#results{width:260px; border:solid 1px #DEDEDE; display:none;}
#results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
#results li {border-top:solid 1px #DEDEDE;}
#results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
#results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}
#results li a:hover{background:#FFFFCC;}
#results ul {padding:6px;}
</style>
<div id="search-wrap">
<h1>
<form action="a.php" method="post">
  <input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
  <label>
  <input type="submit" name="button" id="button" value="Enviar" />
  </label>
</form>
</h1>
<div id="results"></div>
</div>
 

ajax_framework.js

Código Javascript:

function createObject() {
    var request_type;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
    request_type = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        request_type = new XMLHttpRequest();
    }
        return request_type;
}
 
var http = createObject();
function autosuggest() {
q = document.getElementById('search-q').value;
nocache = Math.random();
http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
http.onreadystatechange = autosuggestReply;
http.send(null);
}
function autosuggestReply() {
if(http.readyState == 4){
    var response = http.responseText;
    e = document.getElementById('results');
    if(response!=""){
        e.innerHTML=response;
        e.style.display="block";
    } else {
        e.style.display="none";
    }
}
}
function clearsuggest() { 
e = document.getElementById('results'); 
e.style.display="none"; 
} 
function fill(i) {
e = document.getElementById('search-q');
e.value=i;
document.getElementById('results').style.display="none";
}
 

search.php

Código PHP:

<?php 
    include('config.php'); 
    $SQL_FROM = 'usuarios';  // Editen La Tabla.
    $SQL_WHERE = 'usuario';  // La columna que interesa.
 
?>
<?php
    $searchq        =   strip_tags($_GET['q']);
    $getRecord_sql  =   'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"';
    $getRecord      =   mysql_query($getRecord_sql);
    if(strlen($searchq)>0){
    echo '<ul>';
    while ($row = mysql_fetch_array($getRecord)) {?><!-- /*editen la columan*/  " $row['usuario']  $row['estatus']<-- esta seria la columna con la descripcion -->
        <li><a href="#" onClick="fill('<?php echo $row['usuario']; ?>');return false;"><?php echo $row['usuario']; ?> <small><?php echo $row['estatus']; ?></small></a></li>
    <?php } 
    echo '</ul>';
    ?>
<?php } ?>
 

Tengan en cuenta, que search.php y ajax_framework.js tienen que estar dentro de una carpeta llamada lib y tambien dentro de lib, tienen que estar config.php que tiene los datos de conexion a My SQL.

Iniciado por Fuente

http://woork.blogspot.com/2008/03/php-components-autosuggest.html
Tengan en cuenta que el archivo de este blogspot esta mal, y fue editado por mi para su correcta funcion.

Saludos y espero que les sirva a todos aquellos que lo buscaron.