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.
sábado, novembro 09, 2013
Assinar:
Postar comentários (Atom)
Nenhum comentário:
Postar um comentário