<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<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 fnc=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,fnc);
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, 'keyup', SelUsuario.Empieza);
SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
SelUsuario.Evento(elem1, 'keydown', SelUsuario.Pegar2);
SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
},
creaAjax: function (){
ajax = new XMLHttpRequest();
}
},
Empieza: function (evt) {
var str = document.getElementById(this.id).value;
var obj = document.getElementById("contenedor");
var ref = obj.getElementsByTagName('DIV');
var keyCode = (evt) ? evt.keyCode : evt.charCode;
if (keyCode == 40) {
//alert("flecha abajo")
SelUsuario.BajaOpt ()
} else if (keyCode == 38) {
//alert("flecha arriba")
SelUsuario.SubeOpt ()
} else if (keyCode == 13) {
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
document.getElementById("txt").value = ref[i].id;
if (obj.style.display == "block"); obj.style.display= "none";
break;
}
}
try{
ev.preventDefault();
}catch(e){
ev.returnValue = false;
}
} else {
if (str.length < 2) {
if (obj.style.display == "none") obj.style.display= "none";
lse obj.style.display= "none";
return;
}
ajax = SelUsuario.creaAjax();
if (ajax==null) {
alert ("Tu navegador no soporta Ajax");
return;
}
var url="selecusuarios.asp?q="+escape(str);
ajax.open("GET",url,true);
ajax.onreadystatechange = SelUsuario.Despliega;
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return;
}
},
Despliega: function () {
var obj = document.getElementById("contenedor");
if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
obj.innerHTML = "<p align='center'><img src='precarga.gif' border='0px' widht='15px' height='15px'/></p>";
obj.style.display= "block";
}
else if (ajax.readyState==4) {
if (ajax.status==200) {
obj.innerHTML = unescape(ajax.responseText);
}
if (obj.style.display == "none") obj.style.display= "block";
}
},
Seleccionar: function () {
var ref = document.getElementById(this.id).getElementsByTagN ame('DIV');
for (var i = 0; i < ref.length; i++) {
SelUsuario.Evento(ref[i], 'click', function() {
SelUsuario.Pegar(this.id);
})
SelUsuario.Evento(ref[i], 'mouseover', function() {
SelUsuario.Marcar(this.id);
})
}
},
Pegar: function (valor) {
var obj = document.getElementById("contenedor")
document.getElementById("txt").value = valor;
if (obj.style.display == "block"); obj.style.display= "none";
},
Pegar2: function (evt) {
var obj = document.getElementById("contenedor")
var ref = obj.getElementsByTagName('DIV');
var keyCode = (evt) ? evt.keyCode : evt.charCode;
// enter 13 tab 9
if ((keyCode == 13) || (keyCode == 9)) {
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
document.getElementById("txt").value = ref[i].id;
if (obj.style.display == "block"); obj.style.display= "none";
break;
}
}
if (keyCode == 13) {
try{
ev.preventDefault();
}catch(e){
ev.returnValue = false;
}
}
}
},
BajaOpt: function() {
var ref = document.getElementById("contenedor").getElementsB yTagName('DIV');
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
ref[i].className = "deseleccionado";
if (i < ref.length-1){
i++;
}else{
i = 0;
}
ref[i].className = "seleccionado"
}
}
},
SubeOpt: function() {
var ref = document.getElementById("contenedor").getElementsB yTagName('DIV');
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
ref[i].className = "deseleccionado";
if (i < ref.length && i > 0){
i--;
}else{
i = ref.length-1;
}
ref[i].className = "seleccionado"
}
}
},
Marcar: function (id) {
var selecionado = document.getElementById(id);
var ref = document.getElementById("contenedor").getElementsB yTagName('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>
Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />
<div id="contenedor" class="capa" style="display:none;"></div>
</form>
</body>
</html>