<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<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, 'keyup', SelUsuario.Empieza);
SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
SelUsuario.Evento(elem1, 'keydown', SelUsuario.Pegar2);
//SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
},
creaAjax: function (){
var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
var ajax = false;
for(var i=0 ; !ajax && i<ajaxs.length ; i++){
try{
ajax = new ActiveXObject(ajaxs[i]); // Internet Explorer
}
catch(e) {
ajax = false;
}
}
if(!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
return ajax;
},
Empieza: function (ev) {
var str = document.getElementById("txt").value;
var obj = document.getElementById("contenedor");
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
if (keyCode == 40) {
//alert("flecha abajo")
SelUsuario.BajaOpt ()
} else if (keyCode == 38) {
//alert("flecha arriba")
SelUsuario.SubeOpt ()
} else {
//var str = document.getElementById("txt").value;
//var obj = document.getElementById("contenedor");
if (str.length < 2) {
//obj.innerHTML = "";
if (obj.style.display == "none") obj.style.display= "none";
else 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==4) {
if (ajax.status==200) {
obj.innerHTML = unescape(ajax.responseText);
}else {
alert ("Error: " + ajax.status);
return;
}
if (obj.style.display == "none") obj.style.display= "block";
}
},
Seleccionar: function () {
var ref = document.getElementById(this.id).getElementsByTagName('DIV');
//alert(ref);
for (var i = 0; i < ref.length; i++) {
SelUsuario.Evento(ref[i], 'click', function() {
SelUsuario.Pegar(this.id);
//alert(this.id);
})
SelUsuario.Evento(ref[i], 'mouseover', function() {
SelUsuario.Marcar(this.id);
})
//SelUsuario.Evento(ref[i], 'mouseout', function() {
//SelUsuario.DesMarcar(this.id);
//})
}
},
Pegar: function (valor) {
//alert("el val " +valor);
var obj = document.getElementById("contenedor")
document.getElementById("txt").value = valor;
obj.style.display= "none";
},
Pegar2: function (ev) {
var obj = document.getElementById("contenedor")
var ref = obj.getElementsByTagName('DIV');
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
// enter 13 tab 9
if (keyCode == 13) {
//alert("enter")
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
document.getElementById("txt").value = ref[i].id;
break;
alert(ref[i].id);
obj.style.display= "none";
}
}
} else if (keyCode == 9) {
alert("Tab")
}
},
BajaOpt: function() {
var ref = document.getElementById("contenedor").getElementsByTagName('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;
}
//alert("Largo: " +(ref.length-1)+ " Valor: " +i);
ref[i].className = "seleccionado"
}
}
},
SubeOpt: function() {
var ref = document.getElementById("contenedor").getElementsByTagName('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;
}
//alert("Largo: " +(ref.length-1)+ " Valor: " +i);
ref[i].className = "seleccionado"
}
}
},
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")
// obj.style.display= "none";
//}
}
SelUsuario.Evento(window, 'load', SelUsuario.init,false);
</script>
</head>
<body>
Nombre Usuario: <input type="text" id="txt" value="" autocomplete="off" />
<div class="vink" style="margin:5px 0px 0px 10px">
<div id="contenedor" class="capa">
<div id="a" class="">a</div>
<div id="b" class="seleccionado">b</div>
<div id="c" class="">c</div>
<div id="d" class="">d</div>
</div>
</div>
</body>
</html>