Ver Mensaje Individual
  #7 (permalink)  
Antiguo 22/06/2009, 06:22
Ayuso
 
Fecha de Ingreso: julio-2008
Mensajes: 31
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Como seleccionar un elemento de una lista desplegable con teclado?

Estas son las funciones que he usado:
Este es el formularo donde se muestra el input donde escribe el usuario y se debe de mostrar el autocomplete en el div.
Código HTML:
 <form name="formasigpriv" method="post">
	<table width="85%" align="center">
	  <tr height="60">
	    <td class="impacto"><?php echo htmlentities(USUARIO) ?>:</td>
		<td><input type="text" id="usuario" name="usuario" size="50" onblur="ocultarautocomplete()" onKeyUp="autocompletar()"><div id="autocomplete"></div></td>
	  </tr>
	  <tr height="60">
	    <td class="impacto"><?php echo htmlentities(TIPOPRIV) ?>:</td>
		<td>
		  <select name="tipopriv" id="tipopriv">
		  <?php
                   ......relleno el select... 
		  ?>
		  </select>
		</td>
	  </tr>
	  <tr><td>&nbsp;</td></tr>
	  <tr>
	    <td colspan="2" align="center"><input type="button" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'"   value="<?php echo htmlentities(ASIGPRIV) ?>" onClick="asignarPrivilegios()"></td>
	  </tr>
	</table>
  </form> 
Esta es la funcion php que recupera de la base de datos y escribe en el div
Código PHP:
        include("../cabecera.php");
    
$texto $_POST["texto"];
    
$crit $_POST["crit"];
    if (
$crit == "apellidos")
        
$query "SELECT usuario AS salida FROM usuarios WHERE usuario LIKE '"utf8_decode($_POST["texto"]) . "%'";
    else
        
$query "SELECT CONCAT(apellidos, ', ', nombre) AS salida FROM usuarios WHERE CONCAT(apellidos, ', ', nombre) LIKE '" utf8_decode($_POST["texto"]) . "%'";
    
$resultado mysql_query ($query);
    while (
$fila mysql_fetch_array($resultado))
        echo 
"<div><a href='javascript:completarNombre(\"" htmlentities($fila["salida"]) . "\")'>" htmlentities($fila["salida"]) . "</a></div>\n"
esta son las funciones javascrip que trabajan para el autocomplete, la primera oculta el div, la segunda realiza la a peticion a la base de datos, la otra lo coloca en el sitio correcto y la ultima es para cuando hagamos click en el rato en alguno de los datos del div se copie al input.
Código:
function ocultarautocomplete(){
	var comp = document.getElementById('autocomplete');
	comp.style.visibility = "hidden";
}

function autocompletar()
{
	var comp = document.getElementById('autocomplete');
	var textbox = document.getElementById('usuario');
	if (document.getElementById('buscarporape').checked == true)
		var crit = "usuario";
	else
		var crit = "apellidos";

	if (textbox.value == ""){
		comp.style.visibility = "hidden";
	} 
	else {
		colocarAutocomplete();
		var ajax = nuevoAjax();
		ajax.open("POST","auxi/autocomplete.php",true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.onreadystatechange = function() {
			if (ajax.readyState == 4){
				if (ajax.responseText == "")
					comp.style.visibility = "hidden";
				else{
					comp.innerHTML = ajax.responseText;
					comp.style.visibility = "visible";
				}
			}
		}
		ajax.send("texto=" + textbox.value + "&crit=" + crit);
	}
}

function colocarAutocomplete(){
	var comp = document.getElementById('autocomplete');
	var textbox = document.getElementById('usuario');
	var oNode = textbox;
	var iLeft = 0;
	var iTop = 0;
	while(oNode.tagName != "BODY") {
		iLeft += oNode.offsetLeft;
		iTop += oNode.offsetTop;
		oNode = oNode.offsetParent;
	}
	comp.style.left = iLeft;
	comp.style.top = iTop + textbox.offsetHeight;
	comp.style.width = textbox.offsetWidth;
}

function completarNombre(nombre){
	var comp = document.getElementById('autocomplete');
	var textbox = document.getElementById('usuario');
	textbox.value = nombre;  
	comp.style.visibility = "hidden";
}
Siento la parrafada, seguro que hay formas mas elegantes de hacerlo, pero...
Muchas gracias, te agradezco la ayuda!!