Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Busqueda Instantanea

Estas en el tema de Busqueda Instantanea en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/07/2010, 19:24
Avatar de Master_raven  
Fecha de Ingreso: junio-2008
Ubicación: Guatemala City, Guatemala, Guatemala
Mensajes: 95
Antigüedad: 12 años, 4 meses
Puntos: 3
Busqueda Instantanea

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:
Ver original
  1. function BuscaDatDep(Ext,Bus,Div,Acc){
  2.         resul = document.getElementById(Div);
  3.        
  4.         data="Acc=" + Acc + "&Bus=" + Bus + "&Ext=" + Ext;
  5.         document.getElementById('Res01').style.display = "block";
  6.  
  7.         ajax=NuevoAjax();
  8.         ajax.open("POST", "_php/NewBusca.php",true);
  9.         ajax.onreadystatechange=function() {
  10.                 if (ajax.readyState==4) {
  11.                         resul.innerHTML = ajax.responseText
  12.                 }
  13.         }
  14.         ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  15.         ajax.send(data)
  16. }

Código HTML:
Ver original
  1. <table border="0" cellspacing="2" cellpadding="2">
  2.   <tr>
  3.     <td>Nivel Academico</td>
  4.     <td><select name="ac" class="SelectInformacion">
  5.         <option value="0">Selecciona una Opcion</option>
  6.         <option value="1">Primaria</option>
  7.         <option value="2">Basicos</option>
  8.         <option value="3">Diversificado</option>
  9.         <option value="4">Universitario</option>
  10.     </select></td>
  11.   </tr>
  12.     <td>Departamento&nbsp;&nbsp;</td>
  13.     <td><input type="text" name="depto" class="CajaInformacion"  maxlength="128" onkeypress="BuscaDatDep('GTM',this.value,'Res01','Depto')" />
  14.  <div id='Res01' class="StyleDisplay"></div>  
  15.     </td>
  16.   </tr>  

Código CSS:
Ver original
  1. .StyleDisplay {
  2.     position: absolute;
  3.     background:#b6b6b6;
  4.     display:none;
  5.     z-index: 500;
  6.     width: 300px;
  7.     border:#cccccc 1px solid;
  8.     -moz-border-radius-bottomleft:8px;
  9.     -moz-border-radius-bottomright:8px;
  10.     -webkit-border-bottom-left-radius:8px;
  11.     -webkit-border-bottom-right-radius:8px;
  12. }

Código PHP:
Ver original
  1. <?php
  2. include_once "../../includes/DBAconfig.php";
  3. $Enlace = Conectar();
  4.  
  5. if (isset($_POST['Acc']) && $_POST['Acc']=="Depto") {
  6.     $Ext = $_POST['Ext'];
  7.     $Bus = $_POST['Bus'];
  8.    
  9. $Respuesta = mysql_query("SELECT * FROM `q_depto` WHERE `ps_cod` = '$Ext' AND `name` LIKE '$Bus%' LIMIT 4",$Enlace);
  10.  
  11.     if (mysql_num_rows($Respuesta)!==0) {
  12.         while ($Rows = mysql_fetch_array($Respuesta)) {
  13.             echo "&nbsp;&nbsp;&nbsp;<a href=\"javascript:Cinfo('" . $Rows['name'] . "');\" title='Click para seleccionar'>" . $Rows['name'] . "</a><br />";
  14.         }
  15.     } else {
  16.         echo "&nbsp;&nbsp;&nbsp;Sin Resultados";
  17.     }
  18. }
  19.  
  20. if (isset($_POST['Acc']) && $_POST['Acc']=="Muni") {
  21.     $Ext = $_POST['Ext'];
  22.     $Bus = $_POST['Bus'];
  23.    
  24. $Respuesta = mysql_query("SELECT * FROM `q_depto` WHERE `ps_cod` = '$Ext' AND `name` LIKE '$Bus%' LIMIT 4",$Enlace);
  25.  
  26.     if (mysql_num_rows($Respuesta)!==0) {
  27.         while ($Rows = mysql_fetch_array($Respuesta)) {
  28.             echo "&nbsp;&nbsp;&nbsp;<a href=\"javascript:Cinfo('" . $Rows['name'] . "');\" title='Click para seleccionar'>" . $Rows['name'] . "</a><br />";
  29.         }
  30.     } else {
  31.         echo "&nbsp;&nbsp;&nbsp;Sin Resultados";
  32.     }
  33. }
  34. ?>

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 :)
__________________
<?APRENDIENDO
  #2 (permalink)  
Antiguo 13/07/2010, 08:27
Avatar de lexus  
Fecha de Ingreso: enero-2002
Ubicación: Cali - Colombia
Mensajes: 2.234
Antigüedad: 18 años, 9 meses
Puntos: 4
Respuesta: Busqueda Instantanea

yo busco exactamente lo mismo pero en asp.
algun ejemplo sugerido?
__________________
Control de Visitantes, Control de Accesos, Minutas digitales, Manejo de Correspondencia
http://www.controldevisitantes.com
  #3 (permalink)  
Antiguo 13/07/2010, 08:35
 
Fecha de Ingreso: julio-2010
Mensajes: 7
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Busqueda Instantanea

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.
  #4 (permalink)  
Antiguo 13/07/2010, 17:05
Avatar de Master_raven  
Fecha de Ingreso: junio-2008
Ubicación: Guatemala City, Guatemala, Guatemala
Mensajes: 95
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: Busqueda Instantanea

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

Código HTML:
Ver original
  1. <script type="text/javascript" src="js/bsn.AutoSuggest_2.1.3.js" charset="utf-8"></script>
  2. <link rel="stylesheet" href="css/autosuggest_inquisitor.css" type="text/css" media="screen" charset="utf-8" />
  3.  
  4.  
  5. <h3>Ejemplo de autobusqueda</h3>
  6.  
  7. <div><input type="hidden" id="testid" />
  8.     Person : <input type="text" id="testinput_xml" value="" style="width:300px" />
  9.  
  10. </div>
  11.  
  12.  
  13. <script type="text/javascript">
  14.     var options = {
  15.         script:"test.php?json=true&limit=6&",
  16.         varname:"input",
  17.         json:true,
  18.         shownoresults:false,
  19.         maxresults:6,
  20.         callback: function (obj) { document.getElementById('testid').value = obj.id; }
  21.     };
  22.     var as_json = new bsn.AutoSuggest('testinput', options);
  23.    
  24.    
  25.     var options_xml = {
  26.         script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; },
  27.         varname:"input"
  28.     };
  29.     var as_xml = new bsn.AutoSuggest('testinput_xml', options_xml);

y el php esta asi
Código PHP:
Ver original
  1. <?php
  2.     $aUsers = array(
  3.         "Ädams, Egbert",
  4.         "Altman, Alisha",
  5.         "Archibald, Janna",
  6.         "Auman, Cody",
  7.         "Bagley, Sheree",
  8.         "Ballou, Wilmot",
  9.         "Bard, Cassian",
  10.         "Bash, Latanya",
  11.         "Beail, May",
  12.         "Black, Lux",
  13.         "Bloise, India"
  14.     );
  15.    
  16.     $aInfo = array(
  17.         "Bedfordshire",
  18.         "Buckinghamshire",
  19.         "Cambridgeshire",
  20.         "Cheshire",
  21.         "Cornwall",
  22.         "Cumbria",
  23.         "Derbyshire",
  24.         "Devon",
  25.         "Dorset",
  26.         "Durham"
  27.     );
  28.    
  29.    
  30.     $input = strtolower( $_GET['input'] );
  31.     $len = strlen($input);
  32.     $limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;
  33.    
  34.    
  35.     $aResults = array();
  36.     $count = 0;
  37.    
  38.     if ($len) {
  39.         for ($i=0;$i<count($aUsers);$i++) {
  40.             if (strtolower(substr(utf8_decode($aUsers[$i]),0,$len)) == $input)          {
  41.                 $count++;
  42.                 $aResults[] = array( "id"=>($i+1) ,"value"=>htmlspecialchars($aUsers[$i]), "info"=>htmlspecialchars($aInfo[$i]) );
  43.             }
  44.            
  45.             if ($limit && $count==$limit)
  46.                 break;
  47.         }
  48.     }
  49.    
  50.    
  51.    
  52.    
  53.    
  54.     header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
  55.     header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
  56.     header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  57.     header ("Pragma: no-cache"); // HTTP/1.0
  58.    
  59.    
  60.    
  61.     if (isset($_REQUEST['json'])) {
  62.  
  63.     } else {
  64.         header("Content-Type: text/xml");
  65.  
  66.         echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?><results>";
  67.         for ($i=0;$i<count($aResults);$i++)
  68.         {
  69.             echo "<rs id=\"".$aResults[$i]['id']."\" info=\"".$aResults[$i]['info']."\">".$aResults[$i]['value']."</rs>";
  70.         }
  71.         echo "</results>";
  72.     }
  73. ?>

que tengo que editar para sustituir esos array por una busqueda en mi bace de datos
__________________
<?APRENDIENDO
  #5 (permalink)  
Antiguo 25/05/2011, 09:26
 
Fecha de Ingreso: mayo-2011
Ubicación: Toluca
Mensajes: 115
Antigüedad: 9 años, 5 meses
Puntos: 2
Respuesta: Busqueda Instantanea

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

Etiquetas: ajax, busquedas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 05:17.