Como seleccionar un elemento de una lista desplegable con teclado?

Ayuso · #1 (**permalink**) 20/06/2009, 10:49

Buenas, estoy integrnado un sistema de autocomplete en un buscador, pero me encuentro con el siguiente problema, una vez que se me muestran en la lista deplegables los elementos solo me deja seleccionarlos con el raton, y no me deja navegar a traves de ellos con el teclado (arriba y abajo), ademas, me gustaría tambien saber como puedo hacer que se deje de mostrrar la lista cuando clickeo en cualquier lado que no sea la lista. Un saludo y gracias.

Adler · #2 (**permalink**) 20/06/2009, 12:56

Hola

Supongo la lista que se despliega está contenida en un div, así que no puede moverte por las distintas opciones. En cuanto a ocultar la lista, has de usar el evento onblur asociado a una función

Suerte

Ayuso · #3 (**permalink**) 20/06/2009, 16:08

Cita:

Iniciado por Adler

Hola

Supongo la lista que se despliega está contenida en un div, así que no puede moverte por las distintas opciones. En cuanto a ocultar la lista, has de usar el evento onblur asociado a una función

Suerte

Si que se muestra en un div... entonces si se encuentra en un div no hay manera de moverse por ellas? hay alguna solucion que me permita moverme con la teclas de direccion?
Y donde debo de usar el evento onblur?

Adler · #4 (**permalink**) 21/06/2009, 12:43

Hola

Tendrías que usar un select.
Onblur lo puedes usar, por ejemplo, en el body

<body onblur="funcion()">

Suerte

Ayuso · #5 (**permalink**) 21/06/2009, 12:57

lo acabo de poner, pero el problema es que ahora, cuando voy a seleccionar con el raton uno de los elementos del div, no me lo copia a la caja de texto...porque se activa el onblur al clicker fuera del input del texto... no se si me explico..
gracias de todas formas

Adler · #6 (**permalink**) 22/06/2009, 04:38

Hola

Muestra la función que estás usando

Suerte

Ayuso · #7 (**permalink**) 22/06/2009, 06:22

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!!

Adler · #8 (**permalink**) 22/06/2009, 07:53

Hola

Quita el evento onblur y en la función completarNombre

Código javascript:

Ver originalfunction completarNombre(nombre){
    var comp = document.getElementById('autocomplete');
    var textbox = document.getElementById('usuario');
    textbox.value = nombre;  
    
if (comp.style.visibility == "hidden")  comp.style.visibility= "visible";
                else comp.style.visibility= "hidden";
}

Por otro lado, aquí cambia a esto

Código html:

Ver original<div id="autocomplete" style="visibility:hidden;"></div>

Suerte

Ayuso · #9 (**permalink**) 22/06/2009, 10:07

Buenas, Adler gracias por t u ayuda, pero te comento...
[IMG]img194.imageshack.us/img194/2608/dibujodiw.png[/IMG]
A escribir ves como me sale en el div los nombres que coincidem, pues lo que quiero es que por ejemplo sin no hago click con el raton en alguno de ellos, es decir fuera del div que se me oculte la lista desplegable, y con lo que me has comentado no se oculta. La verdad no se si se puede hacer, creo que si, pero te dejo la imagen por si se te puede ocurrir algo. Ahora mismo tal y como esta, solo te deja o elegir alguno de los que salen, copiandose perfectamte al input, o esperara a que al escribir no de ninguna coincidencia...no se si me explico...
Gracias de nuevo

Adler · #10 (**permalink**) 22/06/2009, 12:47

Hola

Lo que pretendes hacer no se puede. El foco está en el campo usuario. En cuanto lo pierda, el div desaparecería, de forma que cuando se intentara seleccionar una de las opciones, no se escribiría en el text.

Suerte

Ayuso · #11 (**permalink**) 22/06/2009, 12:54

Cita:

Iniciado por Adler

Hola

Lo que pretendes hacer no se puede. El foco está en el campo usuario. En cuanto lo pierda, el div desaparecería, de forma que cuando se intentara seleccionar una de las opciones, no se escribiría en el text.

Suerte

Gracias adler, no podría hacerse de otra manera aunque tuviera que cambiar algo? me dijistes que usando un select en vez de un div, podríamos movernos con la teclas de direccion, no se....es que creo que intente algo asi y no se me mostraba donde deseaba...ya me contaras si hay alguna solucion..

Adler · #12 (**permalink**) 22/06/2009, 13:18

Hola

Pensandolo mejor, dejame investigar un poco el caso que nos ocupaba anteriormente

Ayuso · #13 (**permalink**) 22/06/2009, 13:34

Ok, Alder, ya me cuentas! gracias!

Adler · #14 (**permalink**) 02/07/2009, 06:15

Hola

Veamos ....

Tendrás que pasar javascript, así que necesitarás mandar llamar, de forma externa, a este guión con la extensión .js

Código javascript:

Ver originalvar tagScript = '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)';
/**
* Eval script fragment
* @return String
*/
String.prototype.evalScript = function()
{
        return (this.match(new RegExp(tagScript, 'img')) || []).evalScript();
};
/**
* strip script fragment
* @return String
*/
String.prototype.stripScript = function()
{
        return this.replace(new RegExp(tagScript, 'img'), '');
};
/**
* extract script fragment
* @return String
*/
String.prototype.extractScript = function()
{
        var matchAll = new RegExp(tagScript, 'img');
        return (this.match(matchAll) || []);
};
/**
* Eval scripts
* @return String
*/
Array.prototype.evalScript = function(extracted)
{
                var s=this.map(function(sr){
                var sc=(sr.match(new RegExp(tagScript, 'im')) || ['', ''])[1];
                if(window.execScript){
                window.execScript(sc);
                }
                else
                {
                 window.setTimeout(sc,0);
                }
                });
                return true;
};
/**
* Map array elements
* @param {Function} fun
* @return Function
*/
Array.prototype.map = function(fun)
{
        if(typeof fun!=="function"){return false;}
        var i = 0, l = this.length;
        for(i=0;i<l;i++)
        {
                fun(this[i]);
        }
        return true;
};

por otro lado, en principio no te va a funcionar por que está interviniendo un checkbox o radio. Modifica lo que sea necesario hasta adaptarlo a lo que te ocupa

Código javascript:

Ver originalfunction completarNombre(nombre){
    var comp = document.getElementById('autocomplete');
    var textbox = document.getElementById('usuario');
    textbox.value = nombre;  
    comp.style.display= "none";
}
 
 
 
function ocultarautocomplete(){
    var comp = document.getElementById('autocomplete');
    comp.style..display= "none";    
}
 
 
 
 
 
 
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){
                var scs=ajax.responseText.extractScript();
                    comp.innerHTML = ajax.responseText.stripScript();
                scs.evalScript(); 
 
            }
        }
        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 Evento(elemento,nomevento,funcion) {
  if (elemento.attachEvent)
  {
      var f=function(){
        funcion.call(elemento,window.event);
    }
    elemento.attachEvent('on'+nomevento,f);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,false);
      return true;
    }
    else
      return false;
}
 
 
window.onload = function () {
var elemento = document.getElementById('autocomplete');
var elementoDIV = document.getElementById('usuario');
 
    
    elemento.onkeyup = function() {
        autocompletar(elemento.value);
        }
 
    window.onclick = function () {
        ocultarautocomplete();
        }
 
}

en la petición has de incluir algo como

Código javascript:

Ver original<script type="tex/javascript">
var ref = document.getElementById('usuario').getElementsByTagName('nombredelelemento');
for (var i = 0; i < ref.length; i++) {
  Evento(ref[i], 'click', function() {
      completarNombre(this.id); 
})    
}
</script>

alguna duda, ya sabes ....

Suerte

Ayuso · #15 (**permalink**) 02/07/2009, 06:24

Me acabas de acojonar

Voy a probar a ver, lo del check radio, ya lo he quitado, asi que voy a ver como puedo poner esto, porque de un primer vistazo no se como meterle mano...
Muchisimas gracias por tu ayuda!!

Adler · #16 (**permalink**) 02/07/2009, 12:48

Cita:

Iniciado por Ayuso

Me acabas de acojonar

Voy a probar a ver, lo del check radio, ya lo he quitado, asi que voy a ver como puedo poner esto, porque de un primer vistazo no se como meterle mano...
Muchisimas gracias por tu ayuda!!

Tranquilo es mas fácil de lo que puede parecer