<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">
#contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#black;}
#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: 150px;
_width: 250px;
text-align: left;
position: absolute;
top: 30px;
_top:38px;
left: 117px;
_left: 119px;
}
</STYLE>
<script type="text/javascript">
var familia = "";
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(this.id).value;
var obj = document.getElementById("contenedor");
var obj2 = document.getElementById("stock").options[document.getElementById("stock").selectedIndex].value;
var ref = obj.getElementsByTagName('DIV');
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 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{ // DOM;
ev.preventDefault();
}catch(e){ // iexplore;
ev.returnValue = false;
}
} else {
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) + "&variable=" +escape(obj2);
//var url="SelecUsuarios.asp?variable=" +obj2 + "&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='../images/cargando.gif' border='0px' widht='15px' height='15px'/></p>";
obj.style.display= "block";
}
else if (ajax.readyState==4) {
if (ajax.status==200) {
var division = unescape(ajax.responseText);
obj.innerHTML = division.split("-")[0];
familia = division.split("-")[1];
obj.innerHTML = unescape(ajax.responseText);
}else {
obj.innerHTML = "<p>Se ha producido un error</p>";
}
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, familia);
//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, f) {
//alert("el val " +valor);
var obj = document.getElementById("contenedor")
document.getElementById("txt").value = valor;
document.getElementById("fam").value = f;
if (obj.style.display == "block"); 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) || (keyCode == 9)) {
//alert("enter")
for (var i = 0; i <= ref.length-1; i++) {
if (ref[i].className == "seleccionado") {
document.getElementById("txt").value = ref[i].id;
//window.focus();
if (obj.style.display == "block"); obj.style.display= "none";
break;
//alert(ref[i].id);
}
}
if (keyCode == 13) {
try{ // DOM;
ev.preventDefault();
}catch(e){ // iexplore;
ev.returnValue = false;
}
}
}
},
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";
}
}
},
//DesMarcar: function (id) {
//var ref = document.getElementById(id);
//alert(ref);
//ref.className = "deseleccionado"
//alert("el " +id);
//},
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 name="txt" type="text" id="txt" tabindex="1" value="" size="40" autocomplete="off" />
<div class="vink" style="margin:5px 0px 0px 10px">
<div id="contenedor" class="capa" style="display:none;"></div></div>
Filtrar: <select id="stock" name="stock">
<option value="constock" selected>Solo con Stock</option>
<option value="sinstock">Sin Stock</option>
</select><br>
<div class="vink" style="margin:5px 0px 0px 10px">
<div id="campo" class="capa" style="display:none;"></div></div>
Familia: <input type="text" name="fam" id="fam" /><br />
<input type="submit" value="Enviar">
</form>
</body>
</html>