Javascript para se posicionar em um select

Script em Javascript para se posicionar mediante o clique de teclas do teclado dentro dos elementos de um campo select de formulário.

Trata-se de um script para se posicionar em um elemento de um select, ou seja, para conseguir que, clicando umas teclas do teclado que poderiam corresponder com as primeiras letras de um elemento do select, o elemento selecionado do tal select seja aquele que corresponda com as letras pulsadas.

É uma descrição um pouco longa, mas na verdade o efeito é simples. Nos select das páginas web, ao clicar uma tecla, o select se move ao primeiro elemento que tem como inicial essa tecla. Entretanto, se há muitos elementos no select, o usuário pode achar que essa ajuda fica um pouco curta, já que teria que, logo clicar a inicial do elemento buscado, repassar todos os elementos que começam por essa letra até encontrar o que busca. O presente exemplo melhora essa função de busca nos select, já que permite realizar o clique de várias teclas seguidas e vai mostrando aquele elemento que começa por todas as letras que vão sendo clicadas (uma atrás da outra) até que se aperta a tecla Enter, momento no qual se supõe que encontramos o elemento adequado e queremos continuar com o preenchimento de outros campos do formulário.

Neste exemplo foi criado um select com os nomes de diferentes países. Se, por exemplo, queremos buscar o país Estados Unidos, nos selects normais podemos clicar a E (inicial de Estados Unidos) e buscar entre todos os países até que aparece o que queremos. Porém, com a implementação deste script poderemos clicar a E, com o que se posicionará no primeiro país que comece por E (que não tem porque ser o que buscamos, na prática será Equador). Logo, podemos clicar a letra S, com o qual se mostrará Espanha, que não é o que buscamos. Mais tarde clicaria-se a T, aparecendo Estônia e, por último, ao clicar a tecla A, já apareceria o elemento que buscávamos, ESTAdos Unidos.

O script

O script encontra-se comentado dentro do próprio código, para que possa ser compreendido facilmente, ou pelo menos suas bases. Basicamente, utiliza-se o evento de teclado onKeyPress no elemento select dos países, de modo que, quando se clique uma tecla, se tivermos o foco no select, se chamará a uma função que se encarregará de fazer o trabalho mais duro.

Tal trabalho consiste em pegar a tecla que foi clicada e salva-la em uma estrutura de dados, ademais de selecionar o elemento mais próximo ao valor atual da estrutura de dados. Por último, clica-se a tecla enter, deixa-se o select com o último valor selecionado e passa-se o foco ao seguinte elemento do formulário para que o usuário continua preenchendo-o.

<script language="JavaScript1.2">
var digitos=10 //quantidade de digitos buscados
var ponteiro=0
var buffer=new Array(digitos) //declaração do array Buffer
var cadeia=""

function buscar_op(obj,objfoco){
   var letra = String.fromCharCode(event.keyCode)
   if(ponteiro >= digitos){
       cadeia="";
       ponteiro=0;
    }
   //se se pressiona a tecla ENTER, apago o array de teclas pressionadas e salto a outro objeto...
   if (event.keyCode == 13){
       apagar_buffer();
       if(objfoco!=0) objfoco.focus(); //evita foco a outro objeto se objfoco=0
    }
   //senao busco a cadeia teclada dentro do combo...
   else{
       buffer[ponteiro]=letra;
       //salvo na posicao ponteiro a letra teclada
       cadeia=cadeia+buffer[ponteiro]; //armo uma cadeia com os dados que vao ingressando ao array
       ponteiro++;

       //barro todas as opcoes que contem o combo e comparo a cadeia...
       for (var opcombo=0;opcombo < obj.length;opcombo++){
          if(obj[opcombo].text.substr(0,ponteiro).toLowerCase()==cadeia.toLowerCase()){
          obj.selectedIndex=opcombo;
          }
       }
    }
   event.returnValue = false; //invalida a acao de clique de tecla para evitar busca do primeiro caractere
}

function apagar_buffer(){
   //inicia a cadeia buscada
    cadeia="";
    ponteiro=0;
}
</script>

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="544" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="89" height="29"></td>
<td width="114"></td>
<td width="26"></td>
<td width="315"></td>
</tr>
<tr>
<td height="19"></td>
<td valign="top">
<select name="combo1" onKeypress=buscar_op(this,text2) onblur=borrar_buffer() onclick=borrar_buffer()>
    <option>Argentina</option>
    <option>Australia</option>
    <option>Bolivia</option>
    <option>Brasil</option>
    <option>Canada</option>
    <option>Colombia</option>
    <option>Dinamarca</option>
    <option>Estados Unidos</option>
    <option>Estonia</option>
    <option>Austria</option>
    <option>Bulgaria</option>
    <option>Chile</option>
    <option>Espanha</option>
    <option>China</option>
    <option>Costa Rica</option>
    <option>Croacia</option>
    <option>Equador</option>
</select>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td height="18"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="28"></td>
<td colspan="2" valign="top">
<input type="text" name="text2">
</td>
<td></td>
</tr>
<tr>
<td height="58"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Esperamos que vocês possam entender o script e utiliza-lo em suas páginas web.