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.