sábado, novembro 09, 2013

Javascript recuperando e percorrendo elementos de uma listbox (select)

Sabe quando você está naquela fase de achar que "agora é focar no novo projeto" e esquecer todo o sofrimento que aquele velho produto/sistema lhe deu e então, de repente, surge aquela demanda que irá lhe parar para implementar algo naquele velho produto/sistema legado que você estava comemorando por nunca mais ter que olhar para ele?

Fui vítima disso recentemente. E o pior, aquele velho produto/sistema é web, e do tempo do Ronca. Ou seja, esquece se você pensou em ir lá, meter um jQueryzinho e correr para o abraço rs, você vai ter que implementar o solicitado (mesmo não fazendo muito sentido - quem manja de HTML sabe do que eu estou falando neste exemplo).

Enfim, é sempre uma chance a mais de fazer um código simples e postar por aqui ;) já que ando a algum tempo afastado das adoráveis linhas de código fazendo trabalhos de análise, documentação e prototipação.

A parada é, pegar o que foi informado no primeiro campo e pesquisar se há na listbox. Por exemplo, se eu informar 41 ou 041 no campo texto e sair do campo (pressionando TAB, por exemplo), a função deve selecionar na listbox o banco BANRISUL. Se eu informar 1 deve selecionar o Banco do Brasil, e se não encontrar o banco com o termo pesquisado deixo a lista no índice 0.

Cá está a implementação disto usando puramente JavaScript para pesquisar e selecionar um valor contido em uma listbox (ou combobox):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Pesquisar em uma listbox</title>
    <script language="JavaScript" type="text/javascript">
      function fncPesquisarBanco(codBanco) {
        var listOptions;
        var i;
        
        listOptions = document.getElementById("lstBanco").options;
        i = 0;
        listOptions[0].selected = true;
        
        for(i; i < listOptions.length; i++)
        {
          if(parseInt((listOptions[i].text).substring(0, 3), 10) == parseInt(codBanco, 10))
          {
            listOptions[i].selected = true;
            break;
          }
        }
      }
      
      function fncLimparCampoPesquisa() {
        document.getElementById("txtCodBancoPesquisar").value = "";
      }
    </script>
  </head>
  <body>
    <form>
      <label accesskey="s" for="txtCodBancoPesquisar">Código banco:</label>
      
      <input type="text"
             id="txtCodBancoPesquisa"
             name="txtCodBancoPesquisa"
             onblur="fncPesquisarBanco(this.value)"
             size="4"
             maxlength="3" />
      
      <select id="lstBanco"
              name="cboBancos"
              onchange="fncLimparCampoPesquisa()">
        <option value="">Selecione uma opção...</option>
        <option value="1">001 - BANCO DO BRASIL S.A.</option>
        <option value="33">033 - BANESPA - ESTADO DE SAO PAULO</option>
        <option value="41">041 - BANRISUL - RIO GRANDE DO SUL</option>
        <option value="104">104 - CAIXA ECON. FEDERAL</option>
        <option value="237">237 - BANCO BRADESCO S.A.</option>
        <option value="341">341 - BANCO ITAU S.A.</option>
        <option value="422">422 - BANCO SAFRA S.A.</option>
        <option value="637">637 - BANCO SOFISA S.A.</option>
      </select>
    </form>
  </body>
</html>

Vale lembrar que eu poderia testar o comprimento do campo contra a quantidade de caracteres digitados para sair do campo disparando a função ao atingir a marca de 3 caracteres, mas a intenção aqui é deixar o código pequeno para blogar ;) Também deveria testar se o informado no campo é somente números ou a tacla Enter, e neste último caso invocar a função. Mas, de novo, a intenção aqui é blogar simplesmente como recuperar em JavaScript todos os elementos (options) contidos em um elemento SELECT do HTML.