<!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 name="http-equiv" content="Content-type: text/html; charset=utf-8"/>
<STYLE TYPE="text/css">
#contenedorOpt div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
#contenedorOpt div.deseleccionado {background:#FFFFFF; color:#000000;}
#contenedorOpt 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;
}
</STYLE>
<script type="text/javascript">
var TxtId = ''; // el texbox desde donde se lanza la consulta y donde ha de imprimirse la opción cuando se usa la función Pegar()
var SelUsuario = {
captura_objeto : function(idnombre) {
return document.getElementById(idnombre);
},
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;
}
},
creaAjax: function (){
ajax = new XMLHttpRequest();
return ajax;
},
init: function(){
var tablas = document.body.getElementsByTagName('table');
for (i=0; i < tablas.length; i++) {
var inpt = tablas[i].getElementsByTagName('input');
SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'keyup', SelUsuario.Empieza);
SelUsuario.Evento(SelUsuario.captura_objeto('contenedorOpt'), 'mouseover', SelUsuario.Seleccionar);
SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'keydown', SelUsuario.Pegar2);
SelUsuario.Evento(SelUsuario.captura_objeto(inpt[2].id), 'blur', SelUsuario.Cerrar);
}
},
PosicionAbsolutaElemento: function(elTxtBox) {
if (typeof elTxtBox == "string")
var elTxtBox = SelUsuario.captura_objeto(elTxtBox);
if (!elTxtBox) return { top:0,left:0 };
var y = 0;
var x = 0;
while (elTxtBox.offsetParent) {
x += elTxtBox.offsetLeft;
y += elTxtBox.offsetTop;
elTxtBox = elTxtBox.offsetParent;
}
return {top:y,left:x};
},
Desplieaga: function(posLeft,posTop) {
var elDiv = SelUsuario.captura_objeto('contenedorOpt');
//alert(elDiv.id+ " - " +posLeft+ " - " +posTop);
elDiv.style.left = posLeft+'px';
elDiv.style.top = parseInt(posTop+21) +'px';
elDiv.style.display = 'block';
elDiv.style.zIndex = 100;
},
Empieza: function (ev) {
TxtId = SelUsuario.captura_objeto(this.id).id;
var elTxtBox = SelUsuario.captura_objeto(this.id);
var str = elTxtBox.value;
var elDiv = SelUsuario.captura_objeto('contenedorOpt');
var opt = elDiv.getElementsByTagName('DIV');
var keyCode = (ev) ? et.keyCode : ev.charCode;
if (keyCode == 40) { // flecha abajo
SelUsuario.BajaOpt ('contenedorOpt')
} else if (keyCode == 38) { // flecha arriba
SelUsuario.SubeOpt ('contenedorOpt')
} else if (keyCode == 13) { // enter
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == "seleccionado") {
str = opt[i].id;
if (elDiv.style.display == "block"); elDiv.style.display= "none";
break;
}
}
try{
ev.preventDefault();
}catch(e){
ev.returnValue = false;
}
} else {
if (str.length < 2) {
//elDiv.innerHTML = "";
if (elDiv.style.display == "none") elDiv.style.display= "none";
else elDiv.style.display= "none";
return;
}
ajax = SelUsuario.creaAjax()
if (ajax==null) {
alert ("Tu navegador no soporta Ajax");
return;
}
var url="SelecUsuarios.php?q="+escape(str);
ajax.open("GET",url,true);
ajax.onreadystatechange = function () {
var PosElemento = SelUsuario.PosicionAbsolutaElemento(elTxtBox);
var posicionInicialLeft = parseInt(PosElemento.left);
var posicionInicialTop = parseInt(PosElemento.top);
if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
elDiv.innerHTML = "<p align='center'><img src='precarga.gif' border='0px' widht='15px' height='15px'/></p>";
elDiv.style.display= "block";
}
else if (ajax.readyState==4) {
if (ajax.status==200) {
elDiv.innerHTML = unescape(ajax.responseText);
}else {
elDiv.innerHTML = "<p>Se ha producido un error</p>";
}
if (elDiv.style.display == "none") elDiv.style.display= "block";
}
SelUsuario.Desplieaga(posicionInicialLeft, posicionInicialTop);
}
//ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(null);
return
}
},
Seleccionar: function () {
var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
for (var i = 0; i < opt.length; i++) {
SelUsuario.Evento(opt[i], 'click', function() {
//alert(this.id);
SelUsuario.Pegar(this.id);
})
SelUsuario.Evento(opt[i], 'mouseover', function() {
//alert(this.id);
SelUsuario.Marcar(this.id);
})
//SelUsuario.Evento(opt[i], 'mouseout', function() {
//SelUsuario.DesMarcar(this.id);
//})
}
},
Pegar: function (valor) {
//alert(TxtId);
var elDiv = SelUsuario.captura_objeto('contenedorOpt')
SelUsuario.captura_objeto(TxtId).value = valor;
if (elDiv.style.display == "block"); elDiv.style.display= "none";
},
Marcar: function (valor) {
//alert(valor.id);
var selecionado = SelUsuario.captura_objeto(valor);
var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
for (var i = 0; i < opt.length; i++) {
if (opt[i].className == "seleccionado") {
//alert(opt[i].id + " - " + valor.id);
opt[i].className = "deseleccionado";
selecionado.className = "seleccionado";
break;
}
}
},
//DesMarcar: function (valor) {
//var opt = SelUsuario.captura_objeto(valor);
//alert(opt);
//opt.className = "deseleccionado"
//alert("el " +valor);
//},
Pegar2: function (ev) {
var elDiv = SelUsuario.captura_objeto('contenedorOpt')
var opt = elDiv.getElementsByTagName('DIV');
var keyCode = (ev) ? et.keyCode : ev.charCode;
// enter 13 tab 9
if ((keyCode == 13) || (keyCode == 9)) {
//alert("enter")
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == "seleccionado") {
SelUsuario.captura_objeto(this.id).value = opt[i].id;
//window.focus();
if (elDiv.style.display == "block"); elDiv.style.display= "none";
break;
//alert(opt[i].id);
}
}
if (keyCode == 13) {
try{
ev.preventDefault();
}catch(e){
ev.returnValue = false;
}
}
}
},
BajaOpt: function() {
var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == "seleccionado") {
opt[i].className = "deseleccionado";
if (i < opt.length-1){
i++;
}else{
i = 0;
}
//alert("Largo: " +(opt.length-1)+ " Valor: " +i);
opt[i].className = "seleccionado"
}
}
},
SubeOpt: function() {
var opt = SelUsuario.captura_objeto('contenedorOpt').getElementsByTagName('DIV');
for (var i = 0; i <= opt.length-1; i++) {
if (opt[i].className == "seleccionado") {
opt[i].className = "deseleccionado";
if (i < opt.length && i > 0){
i--;
}else{
i = opt.length-1;
}
//alert("Largo: " +(opt.length-1)+ " Valor: " +i);
opt[i].className = "seleccionado"
}
}
},
Cerrar: function () {
//alert(this.id)
setTimeout("var elDiv = SelUsuario.captura_objeto('contenedorOpt'); if (elDiv.style.display == 'block'); elDiv.style.display= 'none';", 1000);
}
}
SelUsuario.Evento(window, 'load', SelUsuario.init);
</script>
</head>
<body>
<form method="post" action="">
<table width="351" border="1" align="center" bordercolor="#0000FF" id="idt_1">
<tr>
<td>Sel</td>
<td width="36">Csr:</td>
<td width="70">Modelo:</td>
<td width="47">Serie:</td>
<td width="170">Comentarios:</td>
</tr>
<tr>
<td width="21"><input type="checkbox" name="cod" value="" tabindex="1" ></td>
<td height="55"><input type="text" name="csr" readonly="readonly" size="3" value="2345" tabindex="2"></td>
<td>Nombre Usuario: <input type="text" name="txt" id="txt1" value="" autocomplete="off" tabindex="3"></td>
<td><input type="text" name="serie" tabindex="4"></td>
<td><textarea name="comentarios" cols="30" rows="3" wrap="VIRTUAL" tabindex="5"></textarea></td>
</tr>
</table>
<table width="351" border="1" align="center" bordercolor="#0000FF" id="idt_2">
<tr>
<td>Sel</td>
<td width="36">Csr:</td>
<td width="70">Modelo:</td>
<td width="47">Serie:</td>
<td width="170">Comentarios:</td>
</tr>
<tr>
<td width="21"><input type="checkbox" name="cod" value="" tabindex="6" ></td>
<td height="55"><input type="text" name="csr" readonly="readonly" size="3" value="2346" tabindex="7"></td>
<td>Nombre Usuario: <input type="text" name="txt" id="txt2" value="" autocomplete="off" tabindex="8"></td>
<td><input type="text" name="serie" tabindex="9"></td>
<td><textarea name="comentarios" cols="30" rows="3" wrap="VIRTUAL" tabindex="10"></textarea></td>
</tr>
</table>
<div id="contenedorOpt" class="capa" style="display:none;"></div>
</form>
</body>
</html>