informatica

Idees

Un formulario al que se puede acceder rápidamente

Este es un script para ayudar a quienes les gusta los formularios. ¿Quisiera que se pueda acceder a una larga lista de datos mediante una lista que desfila? En lugar de dejar que sus visitantes se pierdan en listas interminables, guíelos mediante un pequeño campo de texto. Colóquelo inmediatamente encima de la lista. Cuando un visitante introduce las primeras letras de una palabra (o título de una película, o canción, etc.), se reducirá la lista a estos elementos y sólo aparecerán los que correspondan a su solicitud. Una manera formidable de organizar listas demasiado largas.

¿Quiere ver un ejemplo?

Para definir este tipo de formulario, coloque primero este largo script en el encabezamiento de su página.

<script LANGUAGE="JavaScript">

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;
  }
}

function setUp() {
  obj1 = new SelObj('menuform','itemlist','entry');
  obj1.bldInitial();
}

</script>

Después, defina su formulario de la siguiente manera. No olvide personalizar su lista:

<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selectedIndex].value;return false;">
<input type="text" name="entry" size="30" onKeyUp="javascript:obj1.bldUpdate();">
<br>
<select name="itemlist" size=5>
<option value="my_page1.htm">First element
<option value="my_page2.htm">Second element
<option value="my_page3.htm">Third element
</select>
</form>

Y tampoco olvide iniciar el script durante la carga de su página:

<body  OnLoad="javascript:setUp()">