Guilherme's profileGuilherme de Carvalho Ca...PhotosBlogListsMore Tools Help

Blog


    September 06

    AutoComplete com jQuery e asp.net

    O objetivo deste post não é determinar qual a melhor abordagem a ser adotada no desenvolvimento de um componente de autocompletar nas aplicações asp.net, mas mostrar uma alternativa ao AutoComplet do Toolkit.
     
    Vamos utilizar o jQuery[1], framework para desenvolvimento com JavaScript e AJAX, fazendo o download do arquivo [2], podemos colocá-lo dentro de uma pasta js na nossa aplicação. Após isto poderemos referenciar o framework na nossa webform, onde queremos implentar tal solução. Por ser um arquivo js basta colocarmos no head do nosso webform o link para o arquivo assim: 
     

    <asp:ScriptReference Path="~/jQuery/jquery-1.3.2.js" />

     Você pode estar achando estranho a forma com que referenciei o arquivo, mas como estou usando MasterPage, é necessário que a referencia ao arquivo siga este padrão. Esta referência deve ser feita no arquivo da MasterPage.

    Agora podemos ir para a parte de criação da aplicação que irá fazer a busca no banco de dados para trazer os dados do banco e disponibilizá-los para o componente onde queremos implementar a função de autocomplete, que no nosso caso será um TextBox. Não iremos utilizar um webservice, pois com o uso do jQuery podemos criar esta funcionalidade com uma simples página aspx, bastando para isto criar a função no evento page_load, como mostrado abaixo.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Response.Expires = -1
            Response.ContentType = "text/plain"
            Dim txtResposta As New Text.StringBuilder
            Dim Dr As Npgsql.NpgsqlDataReader
            Dim conPgsql As New NpgsqlConnection(PgConexao.ToString)
            Dim comPgsql As New NpgsqlCommand
            Dim usuarioLogado As Integer = Request.Cookies("UserID").Value
            Try
                comPgsql.Connection = conPgsql
                conPgsql.Open()
                With comPgsql
                    .CommandType = Data.CommandType.Text
                    .CommandText = "SELECT CAST(proc.numero AS TEXT) FROM advogaweb.processo proc INNER JOIN advogaweb.advogado_processo advpr ON proc.idprocesso = advpr.fkprocesso WHERE proc.situacao=0 AND advpr.fkadvogado = CAST(:s1 AS Integer)"
                    .Parameters.Add(New NpgsqlParameter("s1", NpgsqlDbType.Text))
                    .Parameters(0).Value = usuarioLogado
                    Dr = .ExecuteReader()
                End With
                If Dr.HasRows Then
                    While Dr.Read
                        txtResposta.Append(Dr(0).ToString)
                        txtResposta.Append(" ")
                    End While
                    txtResposta.Remove(txtResposta.Length - 1, 1)
                End If
            Catch exPgsql As NpgsqlException
                conPgsql.Close()
            Catch ex As Exception
                conPgsql.Close()
            Finally
                conPgsql.Close()
            End Try
            Response.Write(txtResposta.ToString())
            Response.End()
        End Sub

      A função é auto explicativa, bastando prestar atenção em alguns detalhes, como o tipo do retorno que deve ser uma string e tem que ser retornada pelo response.write. Outro ponto que devemos ter atenção é nas primeiras linhas.

            Response.Expires = -1
            Response.ContentType = "text/plain"

    Estas configurações são necessárias para funcionar da maneira correta, lembrando que você pode adotar uma outra abordagem. Agora podemos partir para a configuração do evento jQuery a ser executado.

    Neste caso foi criada uma função para poder aproveitar o máximo a reusabilidade.

    (function($) {
            $.getProcessosAutocomplete = function() {           
               $.ajax({
                    url: "../admsistema/jQuery.aspx",
                    async: false,
                    success: function(data){                    
                        var processos = data.split(" ");
                        $('.inputProcesso').autocomplete(processos,
                            {
                                width:180, highlight: false, multiple: false, scroll: true, scrollHeight: 300, autoFill:true
                            }
                        );
                    }
                });
            }
        })(jQuery);   


    Neste caso estamos usando o plugin autocomplete[3] do jQuery. A função javascript acima faz requisição ajax ao webform jquery.aspx que tem a função mostrada acima. Depois de tal requisição o resultado é jogado dentro da variável data, que recebe uma string no formato "a b d e f g h i j ..." seria uma string separada por espaços em branco, entretanto o plugin autocomplete precisa de um Array, por isto eu faço o data.split(" ") jogando o resultado dentro da variável processos, que será passado como primeiro parâmetro do autocomplete.

    Foi necessário configurar o async: false ou seja nosso evento será de forma sincrona, porque no meu caso eu precisei implementar a rotina no load da página, mas se desejar que seja de forma assincrona basta configurar para async: true, ou retirar tal parâmetro, porque o default é true

    O segundo parâmetro serve apenas para configurar a exibição do autocomplete, e tais configurações podem ser consultadas na página do autocomplete.

    [1] http://www.jquery.com
    [2] http://docs.jquery.com/Downloading_jQuery
    [3] http://plugins.jquery.com/project/autocompletex

    Bom espero ter sido bem claro neste post, e que sirva de ajuda para quem necessitar implementar tal funcionalidade nas suas aplicações.

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Trackbacks

    The trackback URL for this entry is:
    http://guilhermedotnet.spaces.live.com/blog/cns!2ED92AF2FF4B7AC1!488.trak
    Weblogs that reference this entry
    • None