Comunidad de diseño web y desarrollo en internet online

Ayuda con autocompletar Ajax

Citar            
MensajeEscrito el 05 Mar 2010 07:49 am
Hola
Tengo un script, hecho con Ajax que baje de internet, el cual lo utilizo en un autocompletar de un buscador hecho con PHP y MySQL. El script funciona perfecto, pero lo que no se como hacer es que el usuario pueda navegar por las opciones que aparecen en el autocompletar con las teclas arrowup y arrowdown (las flechitas).
No se casi nada de JS, pero por lo que me doy cuenta, creo que debería crear una función con los códigos de las teclas. Obviamente no lo se hacer. ¿Alguien me podría guiar un poco?
Gracias y saludos.

Por lucio_pincha

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Mar 2010 06:26 pm
postea el codigo u url

Por chug0

Claber

136 de clabLevel



 

Perú

firefox
Citar            
MensajeEscrito el 06 Mar 2010 02:20 am
¡Hola Chug0!
Gracias por responder.
Este es el codigo del .js

Código Javascript :

*/
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
   if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      return new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert("Tu navegador no es compatible. Intenta usando Mozilla Firefox, Apple Safari o Google Chrome");
   }
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
   if (searchReq.readyState == 4 || searchReq.readyState == 0) {
      var str = escape(document.getElementById('txtSearch').value);
      searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
      searchReq.onreadystatechange = handleSearchSuggest; 
      searchReq.send(null);
   }      
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
   if (searchReq.readyState == 4) {
      var ss = document.getElementById('search_suggest')
      ss.innerHTML = '';
      var str = searchReq.responseText.split("\n");
      for(i=0; i < str.length - 1; i++) {
         //Build our element string.  This is cleaner using the DOM, but
         //IE doesn't support dynamically added attributes.
         var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
         suggest += 'onmouseout="javascript:suggestOut(this);" ';
         suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
         suggest += 'class="suggest_link">' + str[i] + '</div>';
         ss.innerHTML += suggest; 
      }
   }
}

//Mouse over function
function suggestOver(div_value) {
   div_value.className = 'suggest_link_over';
}
//Mouse out function
function suggestOut(div_value) {
   div_value.className = 'suggest_link';
}
//Click function
function setSearch(value) {
   document.getElementById('txtSearch').value = value;
   document.getElementById('search_suggest').innerHTML = ''; 
}


Y este es el codigo (una parte) del html:

Código HTML :

<style type="text/css" media="screen">
         body {
            font-size:10; 
        font-family:verdana; 
         }
         .suggest_link {
            background-color: #CECECE;
            border: 0px solid #000000;
            padding: 2px 6px 2px 6px;
            
         }                 
         .suggest_link_over {
            background-color: #FF7F00;
            color: white;
            border: 0px solid #000000;
            padding: 2px 6px 2px 6px;
            border-bottom: none;
         }
         #search_suggest {
            position: absolute; z-index:1;
            right: 527px;
        cursor: pointer;        
        width:298px; 
            background-color: #FFFFFF; 
            text-align: left; 
        border: 0px solid #000000;
        }
    
      .blink {text-decoration: blink;}
               
      </style>

      </div>
      <script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>  
    <body onLoad="document.getElementById('txtSearch').focus()" >    
    <table width="100%" border="0">
  <tr>
    <td><div align="center"><img src="imagenes/logo_hormiga_erg.png" width="446" height="143"></div></td>
  </tr>
</table>
<table width="100%" border="0">        
    <td><form id="frmSearch" action="consulta.php" method="post">
      <div align="center">
        <input name="txtSearch" type="text" id="txtSearch" size="45"  onKeyUp="searchSuggest();" autocomplete="off"/>        
         


Saludos y gracias de nuevo

Por lucio_pincha

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Mar 2010 08:25 pm
¿Alguna idea?
Saludos

Por lucio_pincha

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Mar 2010 09:13 pm

Por chug0

Claber

136 de clabLevel



 

Perú

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.