Hola
Un ejemplo completo
Código Javascript
:
Ver original<html>
<head>
<style type="text/css">
#contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
#contenedor div.deseleccionado {background:#FFFFFF; color:#000000;}
#contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
.capa {
background: #FFFFFF;
border:1px solid rgb(120,120,120);
width: 144px;
_width: 146px;
text-align: left;
position: absolute;
top: 30px;
_top:38px;
left: 117px;
_left: 119px;
}
</style>
<script type="text/javascript">
var SelUsuario = {
Evento: function (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;
},
init: function(){
var elem1 = document.getElementById("txt");
var elem2 = document.getElementById("contenedor");
SelUsuario.Evento(elem1, 'click', SelUsuario.Muestra);
SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
},
Muestra: function () {
document.getElementById("contenedor").style.display= "block";
},
Seleccionar: function () {
var ref = document.getElementById(this.id).getElementsByTagName('DIV');
for (var i = 0; i < ref.length; i++) {
SelUsuario.Evento(ref[i], 'mousedown', function() {
SelUsuario.Pegar(this.id);
})
SelUsuario.Evento(ref[i], 'mouseover', function() {
SelUsuario.Marcar(this.id);
})
}
SelUsuario.Evento(window, 'mouseup', SelUsuario.Cerrar);
},
Pegar: function (valor) {
var obj = document.getElementById("contenedor")
document.getElementById("txt").value = valor;
if (obj.style.display == "block"); obj.style.display= "none";
},
Marcar: function (id) {
var selecionado = document.getElementById(id);
var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].id != id) {
ref[i].className = "deseleccionado";
selecionado.className = "seleccionado";
}
}
},
Cerrar: function () {
var obj = document.getElementById("contenedor")
if (obj.style.display == "block"); obj.style.display= "none";
}
}
SelUsuario.Evento(window, 'load', SelUsuario.init);
</script>
</head>
<body>
<form method="post" action="">
Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />
<div id="contenedor" class="capa" style="display:none;">
<div id="pinchu" class="seleccionado">pinchu</div>
<div id="Adler" class="">Adler</div>
<div id="caricato" class="">caricato</div>
<div id="u_golman" class="">U_Goldman</div>
</div>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Suerte