Foros del Web » Programando para Internet » Javascript »

Campo de texto , efecto google y foros del web

Estas en el tema de Campo de texto , efecto google y foros del web en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/09/2010, 15:06
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Campo de texto , efecto google y foros del web

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
  #2 (permalink)  
Antiguo 14/09/2010, 15:07
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 14 años, 2 meses
Puntos: 2534
Respuesta: Campo de texto , efecto google y foros del web

a este concepto se le conoce como auto completar, solamente busca información al respecto del término...
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 14/09/2010, 19:11
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 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.
  #4 (permalink)  
Antiguo 14/09/2010, 19:16
 
Fecha de Ingreso: diciembre-2007
Mensajes: 927
Antigüedad: 14 años, 6 meses
Puntos: 12
Respuesta: Campo de texto , efecto google y foros del web

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
  #5 (permalink)  
Antiguo 14/09/2010, 19:28
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Campo de texto , efecto google y foros del web

Cita:
Iniciado por Edig Ver Mensaje
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
  #6 (permalink)  
Antiguo 14/09/2010, 20:38
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 16 años, 1 mes
Puntos: 2135
Tema movido desde PHP a Javascript
  #7 (permalink)  
Antiguo 14/09/2010, 20:55
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 13 años, 7 meses
Puntos: 66
Respuesta: Campo de texto , efecto google y foros del web

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

http://www.forosdelweb.com/f127/jque...pletar-830865/
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #8 (permalink)  
Antiguo 15/09/2010, 08:01
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Campo de texto , efecto google y foros del web

Gracias Tredio, ya le pege una ojeada :D
  #9 (permalink)  
Antiguo 15/09/2010, 09:53
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 13 años, 7 meses
Puntos: 66
Respuesta: Campo de texto , efecto google y foros del web

ok, cualquier duda me avisas
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: efecto, foros, google, campos
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 20:06.