Campo de texto , efecto google y foros del web

[SirDuque]

Hola estoy muy interesado en poder tener en mi Webservice este elemento.
No se como se llama el efecto, pero si se que es justo lo que necesito.

les dejo las imagenes, tengo que relacionar el campo de texto con MySQL

Agradeceria toda la informacion que puedan brindar con respecto a esto. Muchas Gracias.




Muchas gracias por su tiempo

[pateketrueke]

a este concepto se le conoce como auto completar, solamente busca información al respecto del término...

[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.

[Edig]

Si quieres la logica es la siguiente [bueno mi logica]:

Al campo de texto le pones en onblur que aparesca un div abajito del text input y ya en ese div [via ajax] incluyes alguna web en php y le procesar la informacion desde la DB

Saludos

[SirDuque]

Iniciado por Edig

Si quieres la logica es la siguiente [bueno mi logica]:

Al campo de texto le pones en onblur que aparesca un div abajito del text input y ya en ese div [via ajax] incluyes alguna web en php y le procesar la informacion desde la DB

Saludos

presisamente eso es lo que hace estos codigos :D

[GatorV]

Tema movido desde PHP a Javascript

[tredio]

hace un tiempito hice un plugin para jquery que hace exactamente eso si quieres lo pruebas.

http://www.forosdelweb.com/f127/jque...pletar-830865/

[SirDuque]

Gracias Tredio, ya le pege una ojeada :D

[tredio]

ok, cualquier duda me avisas