Foros del Web - Ver Mensaje Individual - Utilizar las teclas direccionales para seleccionar un item

freesoftwarrior · #11 (**permalink**) 23/03/2012, 16:20

Mil gracias por tu paciencia.
Respondiendo tu pregunta, no, he cambiado la URL, pues es más, cree un archivo asp con ese mismo nombre.

También encontré en el catch el mismo problema que con el try, de ev en vez de evt.

Yo tengo la costumbre de tabular todo el código que uso y bueno, quedaron así los 2 archivos:

selecusuarios00.asp

Cita:

<!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);
SelUsuario.Evento(window, 'load', SelUsuario.Cerrar2);
},

creaAjax: function ()
{
ajax = new XMLHttpRequest();
return ajax;
},

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
{evt.preventDefault();}
catch(e)
{evt.returnValue = false;}
}
else
{
if (str.length < 2)
{
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==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
{
evt.preventDefault();
}
catch(e)
{
evt.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";
}
}
},

Cerrar2: function ()
{
alert("hey");
},

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>

selecusuarios.asp

Cita:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% Option Explicit %>
<% Response.Buffer=True %>
<% On Error Resume Next %>
<%Response.charset="utf-8"%>

<%
Response.addHeader "pragma", "no-cache"
Response.CacheControl = "Private"
Response.Expires = -1000 'Hace que el explorador no cree cache de esta pagina
%>

<%
Dim SQL, rs, oConn, registros, i
Dim usuario
Dim nombre
nombre = 0
usuario = CStr(Request.QueryString("q"))

Set oConn = Server.CreateObject("ADODB.Recordset")
oConn.ActiveConnection = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:\inetpub\base de datos\auditek.mdb"

IF Len(usuario) >= 2 then
'conexión a bd
SQL="Select Razon_Social FROM Clientes WHERE Razon_Social LIKE '" & usuario & "%' ORDER BY Razon_Social asc"
set rs = oConn.Execute(SQL)
If not rs.eof then
registros = rs.getrows()
Else
Response.Write "<p class=""deseleccionado""><strong>Sin resultados</strong></p>"
Response.End ()
End If
rs.Close
set rs = nothing
oConn.Close
set oConn = nothing
END IF

For i = 0 to Ubound(registros,2)
If i = 0 then
Response.Write "<div id="""& registros(1,i) &""" class=""seleccionado"">"& ResaltarSubStr(registros(1,i)) & "</div>"
Else
Response.Write "<div id="""& registros(1,i) &""" class="""">" & ResaltarSubStr(registros(1,i)) & "</div>"
End If
Next

' ========= funciones ===========
Function ResaltarSubStr(texto)
Dim objRegExp

Set objRegExp= New RegExp
objRegExp.IgnoreCase = True
'objRegExp.Global = True

objRegExp.Pattern = "\b("&usuario&")+(\w)"
texto = objRegExp.Replace(texto, "<strong>$1</strong>$2")

Set objRegExp = Nothing

ResaltarSubStr = texto

End Function
' ====================
%>

He probado utilizar esta sentencia

Cita:

SQL="Select * From Clientes Where (RUC Like'" + usuario + "%') Order By Razon_Social"

RUC es un campo texto.
También probé eliminar con comentarios (//) la sección de código en el primer archivos ASP para que funcione ni bien ingrese 1 carácter (no un mínimo de 2 como indica) y claro, también deshabilite el equivalente en el otro ASP con las condicionales IF, y nada.

Sigo intrigado que en

Cita:

Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />

No exista ningún evento del tipo onChange o onKeyUp que controle el ingreso de datos.

Sigo revisando el código y no le he encontrado nada raro sin embargo simplemente no quiere funcionar.

La forma en que has creado el código Ajax es totalmente nuevo para mi, y por eso estoy teniendo problemas para poder implementarlo en mi código. Esa forma de programas las funciones con nombre: funcition() me parece interesante y nuevo, no había visto algo así antes, pero sin embargo, como te digo, me llama la atención que en el INPUT del formulario no exista ninguna invocación a funciones, pues yo en mi código utilizo el evento onKeyUp.

En realidad estoy en deuda contigo por tu paciencia y preocupación por asistirme. Definitivamente estoy aprendiendo contigo.

Bendiciones.
Un saludo desde el Perú