Area de texto - primeros caracteres posibles opciones

dariones · #1 (**permalink**) 15/06/2009, 13:22

Hola, me podrían indicar amigos cómo en una area de texto, al colocar una letra, aparezca en forma inmediata en forma inferior diferentes opciones con la letra ingresada. Para explicarme mejor, lo que utiliza GOOGLE o FACEBOOK en sus buscadores, que si ingreso la letra A, me sale debajo posibles opciones que empiezen con la A.

Agradezco su cooperacion.

Sam_Enfot · #2 (**permalink**) 15/06/2009, 15:58

Hola,

se me ocurre que:

Si implementas un <input> (*) de esos de opciones, como el que normalmente te encuentras cuando tienes que elegir de que país eres, al introducir la primera letra te saltaría directamente a las opciones que empiezan por esa letra.

Si no te sirve esto y quieres un "diseño" como el que sale en google, eso creo que ya sería mas complicado...

Es decir, creo que debería ser con un <div> oculto, que, una vez entrada la primera letra, lo pasaras a 'visible' (capa.style.visibility='visible' o 'block' i allí escribir las opciones que necesites que el uruario visualize.

Para esta otra opcion, no se exactamente donde poder encontrarla toda junta, ya que hablamos de un codigo mas o menos extenso.

Si te pones a ello y planteas las dudas que te van saliendo, trataré de echar una mano en lo posible.

Suerte!

(*) - he probado de, pero no puedo colgarte links de informacion :S sorry

dariones · #3 (**permalink**) 15/06/2009, 18:47

Cita:

Iniciado por Sam_Enfot

Hola,

se me ocurre que:

Si implementas un <input> (*) de esos de opciones, como el que normalmente te encuentras cuando tienes que elegir de que país eres, al introducir la primera letra te saltaría directamente a las opciones que empiezan por esa letra.

Si no te sirve esto y quieres un "diseño" como el que sale en google, eso creo que ya sería mas complicado...

Es decir, creo que debería ser con un <div> oculto, que, una vez entrada la primera letra, lo pasaras a 'visible' (capa.style.visibility='visible' o 'block' i allí escribir las opciones que necesites que el uruario visualize.

Para esta otra opcion, no se exactamente donde poder encontrarla toda junta, ya que hablamos de un codigo mas o menos extenso.

Si te pones a ello y planteas las dudas que te van saliendo, trataré de echar una mano en lo posible.

Suerte!

(*) - he probado de, pero no puedo colgarte links de informacion :S sorry

Código HTML:

<html>

<head>
<title>Selección en lista desplegable por primeros caracteres</title>
<p align="center"><b>Selección en lista desplegable por primeros caracteres
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function SelObj(formname,selname,textname,str) {
this.formname = formname;
this.selname = selname;
this.textname = textname;
this.select_str = str || '';
this.selectArr = new Array();
this.initialize = initialize;
this.bldInitial = bldInitial;
this.bldUpdate = bldUpdate;
}

function initialize() {
if (this.select_str =='') {
for(var i=0;i<document.forms[this.formname][this.selname].options.length;i++) {
this.selectArr[i] = document.forms[this.formname][this.selname].options[i];
this.select_str += document.forms[this.formname][this.selname].options[i].value+":"+
document.forms[this.formname][this.selname].options[i].text+",";
   }
}
else {
var tempArr = this.select_str.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr[i].split(':');
this.selectArr[i] = new Option(prop[1],prop[0]);
   }
}
return;
}
function bldInitial() {
this.initialize();
for(var i=0;i<this.selectArr.length;i++)
document.forms[this.formname][this.selname].options[i] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = this.selectArr.length;
return;
}

function bldUpdate() {
var str = document.forms[this.formname][this.textname].value.replace('^\\s*','');
if(str == '') {this.bldInitial();return;}
this.initialize();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.selectArr.length;i++)
if(pattern1.test(this.selectArr[i].text)) 
document.forms[this.formname][this.selname].options[j++] = this.selectArr[i];
document.forms[this.formname][this.selname].options.length = j;
if(j==1){
document.forms[this.formname][this.selname].options[0].selected = true;
//document.forms[this.formname][this.textname].value = document.forms[this.formname][this.selname].options[0].text;
   }
}
function setUp() {
obj1 = new SelObj('menuform','itemlist','entry');
// menuform is the name of the form you use
// itemlist is the name of the select pulldown menu you use
// entry is the name of text box you use for typing in
obj1.bldInitial(); 
}
//  End -->
</script>

</head>

<BODY style="font-family: Verdana">
<BODY OnLoad="javascript:setUp()">

</b></p>

<center>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">

<font size="2">Por favor entra las primeras letras del elemento deseado:<br>
</font><br>
<input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="page.html">ALL
<option value="page.html">ALL CATALOG
<option value="page.html">ALL CLUSTERS
<option value="page.html">ALL CLUSTERS HASH EXPRESSIONS
<option value="page.html">ALL COL COMMENTS
<option value="page.html">ALL COL PRIVS
<option value="page.html">ALL COL PRIVS MADE
<option value="page.html">ALL COL PRIVS SENT
<option value="page.html">ALL CONSTRAINTS
<option value="page.html">ALL CONS COLUMNS
<option value="page.html">ALL DB LINKS
<option value="page.html">ALL DEF AUDIT
<option value="page.html">ALL DEPENDENCIES
<option value="page.html">ALL ERRORS
<option value="page.html">ALL HISTOGRAMS
<option value="page.html">ALL INDEXES
<option value="page.html">ALL IND COLUMNS
<option value="page.html">ALL JOBS
<option value="page.html">ALL OBJECTS
<option value="page.html">ALL REFRESH
<option value="page.html">ALL REFRESH NOW
<option value="page.html">ALL USERS
<option value="page.html">ALL VIEWS
<option value="page.html">AUDIT ACTIONS
<option value="page.html">BOOKS
<option value="page.html">CLIENTS
<option value="page.html">CLOSED
<option value="page.html">COLUMN PRIVILEGES
<option value="page.html">DBA ANALYZE COST
<option value="page.html">DBA FROM CLIENTS
<option value="page.html">DBA FROM NEIGHBORS
<option value="page.html">DBA PROFILES
<option value="page.html">DBA REFRESH ALL
<option value="page.html">DBA REFRESH PAGE
<option value="page.html">DBA REPORT
<option value="page.html">DBA RGROUP
<option value="page.html">DBA ROLE
<option value="page.html">DBA ROLE SUMMARY
<option value="page.html">DBA ROLLBACK SEGS
</select>
</form>
</center>
</body>

</html>

En este link se muestra un ejemplo, pero yo quiero, tal como dijiste, que sea un div Oculto y sólo aparezca al ingresar la letra inicial.

Por cierto, las opciones que apareceran son predeterminadas. Son 45 nombres.

gioramies · #4 (**permalink**) 16/06/2009, 06:53

Hola. dariones lo que quieres hacer se conoce como Autocompletar. En librosweb puedes leer más acerca del tema y además encontrarás un ejemplo con muchos detalles y que podrás descargar.

También puedes utilizar alguna librería como Jquery o Mootools para hacerlo. Saludos.