Filtrando un <select...>

Brewster · #1 (**permalink**) 23/08/2005, 04:00

Hola a todos.-

Realmente este tema tiene un poco de todo, no es realmente solo ASP, sino también mucho de javascript y de html.

Imaginemos que tengo una tabla con los campos.-

IdEmpresa
nombreEmpresa

Esa tabla tiene más de 2000 registros.

Quiero que salga en un menu desplegable esos datos, hasta ahí es facil, algo así como.-
<%
abrirConexion()
sql="select * from TEmpresas order by nombreEmpresa"
registro.open sql, conexion
%>
<select name="empresas">
<% while not registro.EOF %>
<option value="<%=IdEmpresa%>"> <%=registro("nombreEmpresa")%> </option>
<% registro.moveNext
wend
registro.close
%>
</select>

Este código está muy bien cuando son pocos registros, pero cuando son 2000 o más es demasiado tedioso para el usuario recorrerse todo el menú desplegable encontrando la empresa que busca.

Por supuesto que dándole a la letra P por ejemplo se va a todos las empresas que empiecen por P, pero yo quiero ir un poco más alla, quiero que según vaya escribiendo en el menú desplegable le vayan quedando en el desplegable solo aquellas empresas que contienen lo que está escribiendo.

Por ejemplo, estoy buscando una empresa que se llama "Tuberias Gonzalez", empiezo a escribir "T" y ya solo me quedan en el menú aquellas que empiezan por T, luego escribo "U" y ya solo me tienen que quedar en el menú aquellas que empiezan por "TU", escribo "B" y ya solo deben quedar aquellas que empiecen por "Tub".

Me estoy armando un lio tremendo con funciones en javascript que me estoy creando mezclando ASP y javascript, pero creo que no voy por buen camino.

Alguien sabe como implementar este filtro del <select...>.

Muchas gracias

#2 (**permalink**) 23/08/2005, 04:07

Vale se exáctamente lo que buscas, mira en mi página y justo hay un txt autocomplete que hace lo que buscas.

Sigue este enlace de The Code Project, justo ahí hay un txtautocomplete muy bueno, si cuando lo pongas en tu código no sabes cómo meterle los datos desde un asp, dame un toke, okis?

Suerte!!

Brewster · #3 (**permalink**) 23/08/2005, 05:06

No acabo de comprender muy bien como se llama a esa función, me he descargado el .js y utilizo el siguiente código.-

<script language="javascript" type="text/javascript" src="actb.js"></script>
<script>
customarray = new Array('uno','dos','tres','cuatro', 'cinco','seis','siete', 'ocho','nueve','diez');

actb(document.getElementById('textbox_id'),customa rray);
}
</script>

¿Para llamarla tengo que crear un text que se llame textbox_id y en el evento onClick lllamar a esa función?, ya lo he hecho y no hace nada.

Gracias

#4 (**permalink**) 23/08/2005, 05:26

Prueba esto:

Código:

<html>
<head>
<script language="javascript" type="text/javascript" src="actb.js"></script>
<script language="javascript" type="text/javascript" src="common.js"></script>
<script>
var customarray=new Array('an apple','alligator','elephant','pear','kingbird','kingbolt', 'kingcraft','kingcup','kingdom','kingfisher','kingpin');
var custom2 = new Array('something','randomly','different');
</script>
</head>

<body>
<input type='text' style='font-family:verdana;width:300px;font-size:12px' id='tb' value=''/> 
<script>
var obj = actb(document.getElementById('tb'),customarray);
//setTimeout(function(){obj.actb_keywords = custom2;},10000);
</script>
</body>
</html>

Brewster · #5 (**permalink**) 23/08/2005, 05:31

Ya me funciona, me faltaba incluir.-

<script language="javascript" type="text/javascript" src="common.js"></script>

Muchas gracias por todo

Brewster · #6 (**permalink**) 23/08/2005, 09:55

Amigo perrogrum, estoy intentando modificar el código que tienes en tu pagina para que una vez seleccione la opción que quieres al darle al botón buscar envie el identificador no el nombre, el codigo que tengo es algo así.-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
qTabla=request.querystring("qTabla")
IdTabla=request.querystring("IdTabla")
nomTabla=request.querystring("nomTabla")
%>
<html>
<head>
<script language="javascript" type="text/javascript" src="actb.js"></script>
<script language="javascript" type="text/javascript" src="common.js"></script>
<script language="JavaScript">
var array1=new Array();
var array2=new Array();

function rellenaTabla() {
<%
abrirProyecto("../")
sql="select * from "&qTabla
rstProyecto.open sql, cnnProyecto
i=0
while not rstProyecto.EOF
pepe=rstProyecto(nomTabla)
if pepe<>"" then
censura=replace(pepe,"'",",")
%>
array1[<%=i%>]='<%=censura%>';
array2[<%=i%>]='<%=rstProyecto(IdTabla)%>';
<%
i=i+1
end if

rstProyecto.moveNext
wend
%>
}
</script>
</head>

<body onLoad="javascript:rellenaTabla();">

<script language="JavaScript" type="text/javascript">
function buscando() {
var bbb = document.getElementById("tb");
location.href='index.asp?b=' + bbb.value;
}
</script>

Buscar manual:
<input type=text size=40 name="b" id="tb" value='' style="font-size:8pt;"> 
<input type="button" onclick="buscando()" value="Buscar" style="font-size:8pt;">

<script>
var obj = actb(document.getElementById('tb'),array1);
</script>

</body>
</html>

Pero no encuentro manera de rescatar el valor de array2 en vez de array1, porque quiero que siga saliendo el nombre como hasta ahora pero al mismo tiempo de forma oculta almacenar un identificador para cuando le de al botón buscar enviar ese id lo a otra página.

Espero haberme explicado.

Gracias

lexus · #7 (**permalink**) 24/08/2005, 10:27

Código:

 
 
<script language="javascript">
var to_find	= "";
var timeoutCtr = 0;
var selectBox;
var txtFind;
var keycode;
 
function findMatch2(s, t){
timeoutCtr = new Date().getTime();
selectBox = s;
txtFind	= t;
keycode	= event.keyCode;
setTimeout("findMatch()", 10);
}
 
function findMatch() {
if (new Date().getTime() - timeoutCtr < 0) return false;
if (txtFind == '' || keycode == 16) {
return false;
}
 
to_find = txtFind.value
if(keycode==8) to_find = to_find.substr(0, to_find.length-1);
 
if(to_find.length==0){
txtFind.value='';
return false;
}
 
allWords	= selectBox.options;
var posLow = 0;
var posHigh = allWords.length;
var foundIt = false;
s2		 = to_find.toLowerCase();
while (posLow <= posHigh) { 
posMid = Math.floor((posLow + posHigh) / 2); 
s1	 = allWords[posMid].text;
s	 = allWords[posMid].text.toLowerCase();
if (s.indexOf(s2) == 0){
go = true;
for (var i=posMid; i>=0; i--){
	if(allWords[i].text.toLowerCase().indexOf(s2) == 0){
	 s1	 = allWords[i].text;
	 s	 = allWords[i].text.toLowerCase();
	} else {
	 break;
	}
}
posMid				 = i+1;
foundIt				 = true;
selectBox.selectedIndex = posMid;
var t				 = s.length - (s.length - s2.length);
end_string			 = s.substr(t, s.length);
txtFind.value		 = s1;
if (end_string != "") {
	var range = txtFind.createTextRange();
	range.moveStart('character', txtFind.value.toLowerCase().lastIndexOf(end_string));
	range.select();
}
	return true;
} else {
if (s2 < s) {
	posHigh = posMid - 1;
} else {
	posLow = posMid + 1;
}
}
}
}
function getInfo(e, obj){
if(e.selectedIndex>=1) obj.value=e[e.selectedIndex].text;
}
</script>
<form>
<select name="city" style='display:inline;width:275;position:absolute;Clip:rect(auto auto auto 257px);' onchange="getInfo(this, this.form.txtServer);">	 
<option value="Acampo">Acampo</option><option value="Acton">Acton</option><option value="Adelanto">Adelanto</option><option value="Adin">Adin</option><option value="Agoura Hills">Agoura Hills</option><option value="Aguanga">Aguanga</option><option value="Ahwahnee">Ahwahnee</option><option value="Alameda">Alameda</option><option value="Alamo">Alamo</option><option value="Albany">Albany</option><option value="Albion">Albion</option><option value="Alderpoint">Alderpoint</option><option value="Alhambra">Alhambra</option><option value="Aliso Viejo">Aliso Viejo</option><option value="Alleghany">Alleghany</option><option value="Alpaugh">Alpaugh</option><option value="Alpine">Alpine</option><option value="Alpine Meadows">Alpine Meadows</option><option value="Alta">Alta</option><option value="Alta Loma">Alta Loma</option><option value="Wishon">Wishon</option><option value="Witter Springs">Witter Springs</option><option value="Wofford Heights">Wofford Heights</option><option value="Woodacre">Woodacre</option><option value="Woodbridge">Woodbridge</option><option value="Woodlake">Woodlake</option><option value="Woodland">Woodland</option><option value="Woodland Hills">Woodland Hills</option><option value="Woody">Woody</option><option value="Wrightwood">Wrightwood</option><option value="Yermo">Yermo</option><option value="Yettem">Yettem</option><option value="Yolo">Yolo</option><option value="Yorba Linda">Yorba Linda</option><option value="Yorkville">Yorkville</option><option value="Yosemite Natl Park">Yosemite Natl Park</option><option value="Yountville">Yountville</option><option value="Yreka">Yreka</option><option value="Yuba City">Yuba City</option><option value="Yucaipa">Yucaipa</option><option value="Yucca Valley">Yucca Valley</option><option value="Zamora">Zamora</option><option value="Zenia">Zenia</option>
</select>
<input name="txtServer" type="text" style='position:relative;width:260;height:21;margin-right:15;margin-top:-1px;' value="[Select City]" onKeyPress="findMatch2(this.form.city, this);" onfocus="var range = this.createTextRange();range.moveStart('character',0);range.select();">
</form>