Foros del Web » Programando para Internet » Javascript »

Ayuda para autocompletar

Estas en el tema de Ayuda para autocompletar en el foro de Javascript en Foros del Web. Hola Tengo un script que baje de internet, el cual lo utilizo en un autocompletar de un buscador hecho con PHP y MySQL. El script ...
  #1 (permalink)  
Antiguo 21/02/2010, 11:23
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Ayuda para autocompletar

Hola
Tengo un script 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.
  #2 (permalink)  
Antiguo 21/02/2010, 12:19
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Necesitas agregarle, al elemento en donde muestres el autocompletado, el evento onkeypress, y deberas pasarle ese evento a una funcion javascript, en la cual preguntaras por el codigo de la tecla presionada (busca los codigos de las teclas del teclado en google). Si presiona tal tecla, se selecciona la opcion de abajo, sino la de arriba...
__________________
HV Studio
Diseño y desarrollo web
  #3 (permalink)  
Antiguo 21/02/2010, 14:22
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

El evento onkeypress lo ubico en el codigo html en el div del textfield. Eso OK.
Pero ¿cómo hago lo otro?
Saludos
  #4 (permalink)  
Antiguo 21/02/2010, 14:42
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Código Javascript:
Ver original
  1. <div onkeypress="tuFuncion(event);"></div>
  2.  
  3. <script type="text/javascript">
  4. function tuFuncion(ev){
  5.  
  6. var down = /* codigo de la flecha hacia abajo */;
  7. var up = /* codigo de la flecha hacia arriba */;
  8.  
  9. if(ev.keyCode == down){
  10.  
  11. // lo moves para abajo
  12.  
  13. }else if(ev.keyCode == up){
  14.  
  15. // lo moves para arriba
  16.  
  17. }
  18.  
  19. }
  20. </script>
__________________
HV Studio
Diseño y desarrollo web
  #5 (permalink)  
Antiguo 21/02/2010, 16:00
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

¿Este codigo <script...> codigo </script> lo pongo en el archivo .js desde donde llamo el autocompletar? Porque si lo ubico en el html no hace nada.
Saludos
Los codigos de las teclas ya estan puestos.
  #6 (permalink)  
Antiguo 22/02/2010, 07:18
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Si lo pones exactamente asi como te lo puse yo (en ese orden) deberia andar.
Lo que se acostumbra es poner todo el codigo javascript justo antes de la etiqueta </body>
__________________
HV Studio
Diseño y desarrollo web
  #7 (permalink)  
Antiguo 25/02/2010, 08:16
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

OK. Lo intento y te digo como fue.
Saludos
  #8 (permalink)  
Antiguo 27/02/2010, 20:15
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

No consigo hacerlo funcionar.
El codigo html lo tengo así:

Código HTML:
<body onLoad="document.getElementById('txtSearch').focus()" > 
    <table width="100%" border="0">
  <tr>
    <td><div align="center"><a><img src="imagenes/logo_hormiga_erg.png" width="446" height="143" border="0"></a></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"  onkeypress="tuFuncion(ev);" onKeyUp="searchSuggest();" autocomplete="off"/>        
         
          <script type="text/javascript">
    //<![CDATA[
    var elemento = document.getElementById("txtSearch")
    elemento.setAttribute("autocomplete", "off");
    //]]&gt;
  </script>
  
          <input name="cmdSearch" id="cmdSearch" value="Buscar" type="submit"><br />
           <div id="search_suggest">                                                                                               
        </div>
            <div align="center" id="links_bus">
        <p align="center"><a href="bus_avan_index.php" class="style1">B&uacute;squeda Avanzada</a> <span class="style1"><a href="bus_rubro_index.php">B&uacute;squeda por Rubro</a></span> <a href="bus_calle_index.php" class="style1" >B&uacute;squeda por Calle</a> <a href="bus_cal_indice_in.php" class="style1">B&uacute;squeda por Indice de Calle</a> <a href="bus_cuadras_index.php" class="style1">B&uacute;squeda por Cuadras</a> <span class="style1"><a href="mapa.php">B&uacute;squeda por Zonas</a></span> </p>  
       </div>
    </form></td>
</body> 
y el JS es este:

Código:
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 = ''; 
}
A ver si ves lo que estoy haciendo mal.
Saludos y gracias
  #9 (permalink)  
Antiguo 27/02/2010, 21:40
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Cita:
Iniciado por lucio_pincha Ver Mensaje
Código HTML:
<!-- ....... -->
<input name="txtSearch" type="text" id="txtSearch" size="45" onkeypress="tuFuncion(ev);" onKeyUp="searchSuggest();" autocomplete="off" />
<!-- ....... --> 
Y donde esta definida tuFuncion() ???
__________________
HV Studio
Diseño y desarrollo web
  #10 (permalink)  
Antiguo 27/02/2010, 23:04
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

Ahi esta, me habia olvidado de ponerla. Es que estuve probando y de tanto sacar y poner edite la pagina sin el codigo.
De todas formas no logro hacerlo funcionar.

Código HTML:
</div>
		<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>  
    <body onLoad="document.getElementById('txtSearch').focus()" >
    <script type="text/javascript">

function tuFuncion(ev){

var down = 38;

var up = 40;

if(ev.keyCode == down){


}else if(ev.keyCode == up){
 

   }
 }
</script> 
    <table width="100%" border="0">
  <tr>
    <td><div align="center"><a><img src="imagenes/logo_hormiga_erg.png" width="446" height="143" border="0"></a></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"  onkeypress="tuFuncion(ev);" onKeyUp="searchSuggest();" autocomplete="off"/>        
         
          <script type="text/javascript">
    //<![CDATA[
    var elemento = document.getElementById("txtSearch")
    elemento.setAttribute("autocomplete", "off");
    //]]&gt;
  </script>
  
          <input name="cmdSearch" id="cmdSearch" value="Buscar" type="submit"><br />
           <div id="search_suggest">                                                                                               
        </div>
            <div align="center" id="links_bus">
        <p align="center"><a href="bus_avan_index.php" class="style1">B&uacute;squeda Avanzada</a> <span class="style1"><a href="bus_rubro_index.php">B&uacute;squeda por Rubro</a></span> <a href="bus_calle_index.php" class="style1" >B&uacute;squeda por Calle</a> <a href="bus_cal_indice_in.php" class="style1">B&uacute;squeda por Indice de Calle</a> <a href="bus_cuadras_index.php" class="style1">B&uacute;squeda por Cuadras</a> <span class="style1"><a href="mapa.php">B&uacute;squeda por Zonas</a></span> </p>  
       </div>
    </form></td>
</table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="100%" border="0">
      <tr>
        <td width="25%"><div align="center" class="style2">
          <div align="right"><a href="formulario.html">Registre su comercio </a></div>
        </div></td>
        <td width="25%"> <div align="center" class="style2"><a href=mailto:'[email protected]'>Cont&aacute;ctenos</a> </div></td>
        <td width="25%"><div align="center"><a href="./politica.php" class="style2">Pol&iacute;tica de privacidad </a></div></td>
        <td width="25%"><div align="center" class="style2">
          <div align="left"><a href="preg_frec.php">Preguntas frecuentes</a> </div>
        </div></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="100%" border="0">
      <tr>
        <td width="64%" valign="bottom">&nbsp;</td>
        <td width="5%"><div align="right"><a href="http://www.google.com/chrome" target="_blank"><img src="imagenes/icono_chrome.png" width="42" height="42" border="0" title="Descargar Google Chrome"></a></div></td>
        <td width="5%"><div align="center"><a href="http://www.apple.com/es/safari/" target="_blank"><img src="imagenes/icono_safari.png" width="42" height="42" border="0" title="Descargar Apple Safari"></a></div></td>
        <td width="19%"><div align="left"><a href="http://www.mozilla.com/es-AR/" target="_blank"><img src="imagenes/icono_firefox.png" width="42" height="42" border="0" title="Descargar Mozilla Firefox"></a></div></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <script language="JavaScript" src="visits.js"></script>
    </body>
</html> 
  #11 (permalink)  
Antiguo 28/02/2010, 11:01
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Mira, te voy a pedir, que no postees por postear... O sea, trata de preocuparte vos un poco tambien en hacer que las cosas funcionen...
No puede ser, sino viste. Es evidente que copiaste y pegaste TEXTUAL el codigo que te pase, cuando lo que tenias que hacer era adaptarlo...
Yo creo que es bastante evidente porque no te funciona.... Si solo miraras...
__________________
HV Studio
Diseño y desarrollo web
  #12 (permalink)  
Antiguo 28/02/2010, 19:36
 
Fecha de Ingreso: febrero-2010
Mensajes: 7
Antigüedad: 14 años, 2 meses
Puntos: 0
Respuesta: Ayuda para autocompletar

No posteo por postear, posteo porque no se JS. Entonces por mas que lo mire 3 días nunca voy a encontrar la solución.
Debajo de "if(ev.keyCode == down){" van el código para que la tecla baje. Lo mismo en el caso "if(ev.keyCode == up){" pero para que suba.
Pero como no se JS por mas que mire y mire nunca me va a salir magicamente el codigo correcto.
  #13 (permalink)  
Antiguo 28/02/2010, 22:32
Avatar de jackson666  
Fecha de Ingreso: noviembre-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 1.971
Antigüedad: 14 años, 5 meses
Puntos: 65
Respuesta: Ayuda para autocompletar

Cita:
Iniciado por lucio_pincha Ver Mensaje
No posteo por postear, posteo porque no se JS. Entonces por mas que lo mire 3 días nunca voy a encontrar la solución.
Debajo de "if(ev.keyCode == down){" van el código para que la tecla baje. Lo mismo en el caso "if(ev.keyCode == up){" pero para que suba.
Pero como no se JS por mas que mire y mire nunca me va a salir magicamente el codigo correcto.
Y con esa actitud menos que menos... Porque no buscas al respecto, tratas de interpretar y entender de a poco?
De que serviria que te de el codigo en bandeja?
__________________
HV Studio
Diseño y desarrollo web

Etiquetas: autocompletado
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 18:37.