Ver Mensaje Individual
  #3 (permalink)  
Antiguo 14/09/2010, 19:11
Avatar de SirDuque
SirDuque
 
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 15 años, 10 meses
Puntos: 89
Respuesta: Campo de texto , efecto google y foros del web

SOLUCION:

index.php

Código PHP:
Ver original
  1. <script type="text/javascript" src="lib/ajax_framework.js"></script>
  2. <style type="text/css">
  3. #search-wrap input{width:400px; font-size:16px; color:#999999; padding:6px; border:solid 1px #999999;}
  4. #results{width:260px; border:solid 1px #DEDEDE; display:none;}
  5. #results ul, #results li{padding:0; margin:0; border:0; list-style:none;}
  6. #results li {border-top:solid 1px #DEDEDE;}
  7. #results li a{display:block; padding:4px; text-decoration:none; color:#000000; font-weight:bold;}
  8. #results li a small{display:block; text-decoration:none; color:#999999; font-weight:normal;}
  9. #results li a:hover{background:#FFFFCC;}
  10. #results ul {padding:6px;}
  11. </style>
  12. <div id="search-wrap">
  13. <h1>
  14. <form action="a.php" method="post">
  15.   <input name="search-q" id="search-q" type="text" onkeyup="javascript:autosuggest()"/>
  16.   <label>
  17.   <input type="submit" name="button" id="button" value="Enviar" />
  18.   </label>
  19. </form>
  20. </h1>
  21. <div id="results"></div>
  22. </div>
ajax_framework.js
Código Javascript:
Ver original
  1. function createObject() {
  2.     var request_type;
  3.     var browser = navigator.appName;
  4.     if(browser == "Microsoft Internet Explorer"){
  5.     request_type = new ActiveXObject("Microsoft.XMLHTTP");
  6.     }else{
  7.         request_type = new XMLHttpRequest();
  8.     }
  9.         return request_type;
  10. }
  11.  
  12. var http = createObject();
  13. function autosuggest() {
  14. q = document.getElementById('search-q').value;
  15. nocache = Math.random();
  16. http.open('get', 'lib/search.php?q='+q+'&nocache = '+nocache);
  17. http.onreadystatechange = autosuggestReply;
  18. http.send(null);
  19. }
  20. function autosuggestReply() {
  21. if(http.readyState == 4){
  22.     var response = http.responseText;
  23.     e = document.getElementById('results');
  24.     if(response!=""){
  25.         e.innerHTML=response;
  26.         e.style.display="block";
  27.     } else {
  28.         e.style.display="none";
  29.     }
  30. }
  31. }
  32. function clearsuggest() {
  33. e = document.getElementById('results');
  34. e.style.display="none";
  35. }
  36. function fill(i) {
  37. e = document.getElementById('search-q');
  38. e.value=i;
  39. document.getElementById('results').style.display="none";
  40. }
search.php
Código PHP:
Ver original
  1. <?php
  2.     include('config.php');
  3.     $SQL_FROM = 'usuarios';  // Editen La Tabla.
  4.     $SQL_WHERE = 'usuario';  // La columna que interesa.
  5.  
  6. ?>
  7. <?php
  8.     $searchq        =   strip_tags($_GET['q']);
  9.     $getRecord_sql  =   'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"';
  10.     $getRecord      =   mysql_query($getRecord_sql);
  11.     if(strlen($searchq)>0){
  12.     echo '<ul>';
  13.     while ($row = mysql_fetch_array($getRecord)) {?><!-- /*editen la columan*/  " $row['usuario']  $row['estatus']<-- esta seria la columna con la descripcion -->
  14.         <li><a href="#" onClick="fill('<?php echo $row['usuario']; ?>');return false;"><?php echo $row['usuario']; ?> <small><?php echo $row['estatus']; ?></small></a></li>
  15.     <?php }
  16.     echo '</ul>';
  17.     ?>
  18. <?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.

Cita:
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.