(publicado originalmente em 2005)
O GMail popularizou um recurso que andava meio escondido nos browsers, que é a possibilidade de enviar e buscar dados do servidor HTTP sem necessidade de refresh da página. Isso é feito com o uso de DHTML, através da função XMLHTTP
A utilização do XMLHTTP requer no mínimo dois componentes: a página com o código DHTML(que normalmente está em um .js) e um código que ficará no servidor respondendo as solicitações vindas da página com o DHTML. Esse código poderá ser uma página em php, cgi, aspx, etc. Você pode encontrar informações sobre a utilização em http://developer.apple.com/internet/webcontent/xmlhttpreq.html
Achei esse recurso muito útil, principalmente quando você precisa procurar informações em outra tabela, como por exemplo, em um cadastro de pedidos você precisa procurar o nome do cliente, mas a quantidade de informações é muito grande para você popular um dropdown, sem contar que o dropdown não permite ao usuário digitar caracteres (apenas selecionar).
Como aprender Javascript e DOM não está nos meus objetivos de curto prazo, pedi uma ajuda ao São Google. Não há muita coisa pronta na net, mas encontrei um exemplo muito interessante na página de Mircho Mirev. Vale a pena uma visita à toda página dele pois há muito código interessante.
A solução do Mircho é muito interessante pois permite a busca de resultados tanto remotamente como através de valor já passados para página em uma Array em Java Script ou ainda diretamente no próprio controle, o que é definido facilmente com parâmetros passados na tag Input. Permite ainda a busca incremental em dropdown tradicionais.
O arquivo com a solução completa dele você pode descarregar nesse link:
http://momche.net/publish/downloads/moacdropdown.zip. Você pode descompactar os arquivos em qualquer diretório e abrir a página article.php.htm em seu browser. Os exemplos que não usam uma lista remota você poderá ver diretamente, pois não dependem em nada de um servidor HTTP.
Essa solução funciona da seguinte forma: você deve incluir 4 arquivos .js em suas páginas. Esses .js verificam quais objetos em sua página possuem o parâmetro acdropdown="true" e passa a tratá-los de forma diferenciada. Exemplo: <INPUT id="inputer4" acdropdown=true autocomplete_list="array:months">. Nesse exemplo, definimos que o input box "inputer4" é um input com auto busca ativada e deve buscar os valores na array "months".
Um exemplo completo:
<html>
<head>
<style>
@import url(dropdown.css);
</style>
<script src="getobject2.js"></script>
<script src="modomt.js"></script>
<script src="xmlextras.js"></script>
<script src="acdropdown.js"></script>
<script>
var months = new Array( ?January?, ?February?, ?March?, ?April?, ?May?, ?June?, ?July?, ?August?, ?September?, ?October?, ?November?, ?December? )
</script>
</head>
<body>
<INPUT id="inputer4" acdropdown=true autocomplete_list="array:months">
<body>
</html>
Como pode se perceber, é muito simples usar esse código. Além dos parâmetros acdropdown e autocomplete_list, você pode passar outros parâmetros:
- autocomplete_button="true|false": define se mostra uma imagem com seta para baixo (semelhante a seta dos dropdown)
- autocomplete_matchbegin="true|false": define se a busca deve começar no início das palavras(true) ou em qualquer parte (false). O padrão é true.
- autocomplete_format="funcao": define uma função customizada para a exibição da lista de opções. Veja o exemplo "Countries (with custom formatting function)" para ter uma idéia de como a função deve ser construída
- autocomplete_list_sort="true": define que a lista de opções deve ser ordenada
- autocomplete_list="array:nomedaarray": define o nome da array de base para as opções. O exemplo acima usa esse parâmetro
- autocomplete_list="list:item1|item2|Item3": permite definir a lista de opções no próprio controle. O exemplo acima poderia ser convertido para <INPUT id="inputer4" acdropdown=true autocomplete_list= "list:January|February|March|April|May|June|July|August|September|October|November|December">
- autocomplete_list="url:http://servidor.com/url?parametro=": esse é o parâmetro mágico que faz com que as informações sejam buscadas no servidor. Você pode colocar qualquer URL e adicionar vários parâmetros, mas é importante que o parâmetro com argumento de busca seja sempre o último, pois os argumentos de busca digitados serão concatenados com essa URL. Exemplo: http://momche.net/get.php?s= . Essa é a página que retorna os resultados dos exemplos do Mircho. Você pode testá-la no browser: http://momche.net/get.php?s=a . Isso retornar uma página com as opções que comecem com a letra a.
- autocomplete_complete="true": essa opção faz com que o input já seja preenchido com a primeira opção que se encaixe nos caracteres de busca. Se essa opção não for setada, será apresentado um dropdown para que o usuário escolha a opção. É importante ter cuidado com essa opção, principalmente se a listagem de opções estiver em um micro remoto, pois como a busca é feita a cada caracter digitado, poderá ficar um pouco lento. Se essa opção não for setada a busca é disparada apenas alguns milissegundos após a digitação da última tecla, ou seja, é necessário que o usuário dê uma pequena parada na digitação para que as opções sejam apresentadas.
Um detalhe importante é como deverão ser retonadas as opções do servidor: deverá ser uma página sem nenhuma tag e com as opções separadas por uma barra vertical (|). Veja esse exemplo http://momche.net/get.php?s=a.
Utilizando esse recurso com ASP.NET
Tudo que vimos até agora poderá ser usado em qualquer linguagem/plataforma. Você pode ver alguns exemplos rodando em ASP.NET.
Utilizar esse código em uma página ASPX não requer muito trabalho:
A) Primeiramente é necessário garantir que os arquivos acdropdown.js, getobject2.js, modomt.js, xmlextras.js, arrowdown.gif, conf.gif, e dropdown.css estejam disponíveis no servidor e visíveis para a página que os estiver chamando. Você pode colocá-los em um diretório específico, diferente da página atual, mas não deve esquecer de incluir o nome do relatório nas referências.
B) Na tag HEAD inclua as seguintes linhas:
<style>@import url( dropdown.css );</style>
<script src="getobject2.js"></script>
<script src="modomt.js"></script>
<script src="xmlextras.js"></script>
<script src="acdropdown.js"></script>
Se você for usar uma(ou mais) lista(s) local de opções, deverá incluí-la aqui também:
<script>
var capitais = new Array(''Florianópolis'',''João Pessoa'',''Curitiba'',''Porto Alegre'',''Rio de Janeiro'',''Fortaleza'',''Recife'',''Goiânia'')
</script>
C) No textbox que terá a procura, você deve acrescentar os parâmetros obrigatórios, acdropdown="true" e a fonte dos dados, exemplo, autocomplete_list="array:capitais". Pode também colocar os parâmetros opcionais de ordenação, preenchimento automático, etc.
Exemplo:
<asp:textbox id="tb1" runat="server" Width="392px" BorderWidth="1px" BorderStyle="Solid" autocomplete_list_sort="true"
autocomplete_list="array:capitais" acdropdown="true"></asp:textbox>
Com isso você já tem um código que funciona localmente. O ASPX completo ficaria como o abaixo:
<html>
<head>
<style>
@import url(dropdown.css);
</style>
<script src="getobject2.js"></script>
<script src="modomt.js"></script>
<script src="xmlextras.js"></script>
<script src="acdropdown.js"></script>
<script>
var capitais = new Array(''Florianopolis'',''Joao Pessoa'',''Curitiba'',''Porto Alegre'',''Rio de Janeiro'',''Fortaleza'',''Recife'',''Goiania'')
</script>
</head>
<body>
<form id="Form1" method="post" runat="server">
<font face=verdana><font size=2><b>Opcoes disponíveis</b>: ''Florianopolis'',''Joao Pessoa'',''Curitiba'',''Porto Alegre'',''Rio de Janeiro'',''Fortaleza'',''Recife'',''Goiania''</font></font><br>
<asp:textbox id="tb1" runat="server" Width="392px" BorderWidth="1px" BorderStyle="Solid" autocomplete_list_sort="true" autocomplete_list="array:capitais" acdropdown="true"></asp:textbox>
</form>
<body>
</html>
Adicionando uma pesquisa com busca de dados no servidor
A busca de dados no servidor exigirá uma etapa adicional, que é a criação de um código que responda às requisições do cliente. Você pode fazer esse código em qualquer linguagem, não necessariamente em ASP.NET, mas é claro que aqui faremos em ASP.NET
É importante salientar que esse código precisa ser muito eficiente e muito rápido na resposta.
Você pode criar uma página de resposta para cada textbox, ou uma página só para todos, passando para essa página como parâmetro o nome do textbox. Mostrarei um exemplo com uma página única para todos.
Nesse link você poderá ver os fontes de um exemplo de retorno de strings.
A página que irá apresentar o textbox será essa:
<html>
<head>
<style>
@import url(dropdown.css);
</style>
<script src="getobject2.js"></script>
<script src="modomt.js"></script>
<script src="xmlextras.js"></script>
<script src="acdropdown.js"></script>
</head>
<body>
<form id="Form1" method="post" runat="server">
<font face=verdana><font size=2><b>Digite as iniciais de uma capital</b>:</font></font><br>
<asp:textbox id="tb1" runat="server"acdropdown="true" autocomplete_list="url:busca.aspx?controle=tbcapitais&arg=" ></asp:textbox>
</form>
<body>
</html>
Perceba que nossa fonte de dados agora é a página busca.aspx e passamos para ela dois parâmetros: o nome do controle onde estamos digitando e arg= . O código em js irá adicionar à URL os caracteres que buscamos.
O resultado será esse:
Você pode pegar todos os arquivos do exemplo aqui:
http://www.br-mono.org/ftp/default.aspx?Diretorio=%2fartigo15
Você pode pegar um a um ou o pacote inteiro que está no zip. Ao descompactar os arquivos, não é necessário compilar o código. Como eu defini a tag src= em <%@ Page language="c#" src="busca.aspx.cs" AutoEventWireup="false" Inherits="brmono.Busca" %> a compilação é dinâmica. Em uma aplicação final, recomendo que seja mudado para codebehind= e que o código seja compilado para fique mais rápido.
Se você tiver alguma dúvida, por favor, entre em contato.