none
Autocomplete jQuery com handler RRS feed

  • Pergunta

  • Uso VS2010, aspnet, c# jquery

    Usando o autocomplete do jQueryUI (www.jqueryui.com) na forma estática funciona:

    $(function () {
                var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp"];

                $("#text").autocomplete({
                    source: availableTags,               
                });
            });

        </script>
    </head>
    <body>
            <input id="text" />
    ...

    --------------------
    Mas quando substituo a variável estática por uma arquivo handler que faz a busca no BD ele não funciona, o que tá errado?

    $(function () {           
                $("#text").autocomplete({
                    source: "handler.ashx"
                });
            });
        </script>
    </head>
    <body>   
            <input id="text" />

    ...


    Álvaro Luiz

    quinta-feira, 27 de dezembro de 2012 00:03

Respostas

  • Amigo,

    Primeiro você está executando esse arquivo no servidor, correto?
    Se você acessar apenas o arquivo "handler.ashx" ele retorna alguma coisa?
    Você prestou atenção no formato de retorno?
    Se você der uma olhada nesse link http://jqueryui.com/autocomplete/#remote depois clicar em "View Source" vai encontrar o código do exemplo e como você pode ver o retorno é em JSON, mas como está esse retorno?

    Segue:

    [{"id":"Ficedula hypoleuca","label":"Eurasian Pied Flycatcher","value":"Eurasian Pied Flycatcher"}]

    É só dar uma olhada na documentação com calma e ver o exemplo que você consegue.

    Espero ter ajudado e não se esqueça de marcar as respostas!!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quinta-feira, 27 de dezembro de 2012 12:32
  • Boa_Vida,

    Você fez a devida validação do que esta sendo passado como parâmetro no Handler ? O retorno esta como o solicitado pelo autocomplete (JSON) ?

    Veja este exemplo:

    Handler.cs
    using System;
    using System.Web;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Script.Serialization;
    
    namespace WebApplication11
    {
        public class Handler : IHttpHandler
        {
    
            public bool IsReusable
            {
                get { return true; }
            }
    
            public void ProcessRequest(HttpContext context)
            {
                if (!String.IsNullOrEmpty(context.Request.QueryString["term"]))
                {
                    List<string> listaFake = new List<string>()
                    {          
    			        "ActionScript",
    			        "AppleScript",
    			        "Asp",
    			        "BASIC",
    			        "C",
    			        "C++",
    			        "Clojure",
    			        "COBOL",
    			        "ColdFusion",
    			        "Erlang",
    			        "Fortran",
    			        "Groovy",
    			        "Haskell",
    			        "Java",
    			        "JavaScript",
    			        "Lisp",
    			        "Perl",
    			        "PHP",
    			        "Python",
    			        "Ruby",
    			        "Scala",
    			        "Scheme"		
                    };
    
                    string procurar = context.Request.QueryString["term"];
    
                    List<string> resultado = listaFake.Where(f => f.StartsWith(procurar, StringComparison.OrdinalIgnoreCase)).ToList();
    
                    context.Response.Write(new JavaScriptSerializer().Serialize(resultado));
                }
            }
        }
    }
    

    .aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#<%=TextConsultaProduto.ClientID %>").autocomplete({
                    source: 'Handler.ashx'
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:TextBox ID="TextConsultaProduto" runat="server" Width="142px"></asp:TextBox><br />
        </form>
    </body>
    </html>
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quinta-feira, 27 de dezembro de 2012 14:02
  • Alvaro,

    Tente serializar a sua lista direto:

    context.Response.Write(new JavaScriptSerializer().Serialize(alunos.Select(a => a.Nome).ToList());



    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/



    • Editado Vitor Mendes sexta-feira, 28 de dezembro de 2012 19:03
    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    sexta-feira, 28 de dezembro de 2012 19:01
  • Álvaro,

    Acho estranha não retornar mais de uma Ana Maria, fiz um teste aqui com itens duplicados, com o mesmo exemplo que postei la acima e trouxe os itens duplicados, veja:



    Sera que seu retorno do banco de dados esta correto ?? tente executar este mesmo T-Sql e veja oque retorna.

    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quarta-feira, 2 de janeiro de 2013 13:12

Todas as Respostas

  • Amigo,

    Primeiro você está executando esse arquivo no servidor, correto?
    Se você acessar apenas o arquivo "handler.ashx" ele retorna alguma coisa?
    Você prestou atenção no formato de retorno?
    Se você der uma olhada nesse link http://jqueryui.com/autocomplete/#remote depois clicar em "View Source" vai encontrar o código do exemplo e como você pode ver o retorno é em JSON, mas como está esse retorno?

    Segue:

    [{"id":"Ficedula hypoleuca","label":"Eurasian Pied Flycatcher","value":"Eurasian Pied Flycatcher"}]

    É só dar uma olhada na documentação com calma e ver o exemplo que você consegue.

    Espero ter ajudado e não se esqueça de marcar as respostas!!


    Não esqueça de marcar como útil uma resposta que te ajude.
    "A diversão é a alma do negócio"

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quinta-feira, 27 de dezembro de 2012 12:32
  • Boa_Vida,

    Você fez a devida validação do que esta sendo passado como parâmetro no Handler ? O retorno esta como o solicitado pelo autocomplete (JSON) ?

    Veja este exemplo:

    Handler.cs
    using System;
    using System.Web;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Script.Serialization;
    
    namespace WebApplication11
    {
        public class Handler : IHttpHandler
        {
    
            public bool IsReusable
            {
                get { return true; }
            }
    
            public void ProcessRequest(HttpContext context)
            {
                if (!String.IsNullOrEmpty(context.Request.QueryString["term"]))
                {
                    List<string> listaFake = new List<string>()
                    {          
    			        "ActionScript",
    			        "AppleScript",
    			        "Asp",
    			        "BASIC",
    			        "C",
    			        "C++",
    			        "Clojure",
    			        "COBOL",
    			        "ColdFusion",
    			        "Erlang",
    			        "Fortran",
    			        "Groovy",
    			        "Haskell",
    			        "Java",
    			        "JavaScript",
    			        "Lisp",
    			        "Perl",
    			        "PHP",
    			        "Python",
    			        "Ruby",
    			        "Scala",
    			        "Scheme"		
                    };
    
                    string procurar = context.Request.QueryString["term"];
    
                    List<string> resultado = listaFake.Where(f => f.StartsWith(procurar, StringComparison.OrdinalIgnoreCase)).ToList();
    
                    context.Response.Write(new JavaScriptSerializer().Serialize(resultado));
                }
            }
        }
    }
    

    .aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
        <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#<%=TextConsultaProduto.ClientID %>").autocomplete({
                    source: 'Handler.ashx'
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:TextBox ID="TextConsultaProduto" runat="server" Width="142px"></asp:TextBox><br />
        </form>
    </body>
    </html>
    


    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quinta-feira, 27 de dezembro de 2012 14:02
  • Olá Vitor, esse é meu arquivo handler adaptei em negrito ele a sua resposta ficou como abaixo, ele faz a pesquisa certinho mas traz o nome com as letras abaixo uma da outra, por exemplo se nome for:
    se eu digitar no autocomplete OBAMA 

    aparece assim:

    O
    B
    A
    M
    A

    __________________

    <%@ WebHandler Language="C#" Class="Busca" %>

    using System;
    using System.Web;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Collections.Generic;
    using System.Linq;
    using System.Linq.Expressions;
    using DML;
    using BLL.GerenteTransacao;
    using BLL.Acao;

    public class Busca : IHttpHandler
    {
        private IGerenteTransacao gerente;
        private IAcao<Aluno> acaoAluno;

        public void ProcessRequest(HttpContext context)
        {
            string nomeAluno = HttpContext.Current.Request.Params["q"];
            if (nomeAluno != null)
            {
                this.gerente = new GerenteTransacaoBase();
                this.acaoAluno = this.gerente.ObterAcao<Aluno>();
     
                IList<Aluno> alunos = acaoAluno.ObterTodosPor(a => a.Funcao.Equals("ALUNO") && a.Nome.Contains(nomeAluno), new Expression<Func<Aluno, object>>[] { a => a.Nome});
                foreach (var aluno in alunos )
                {
                    context.Response.Write(new JavaScriptSerializer().Serialize(aluno.Nome + Environment.NewLine));                  
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


    Álvaro Luiz





    • Editado Álvaro Luiz quinta-feira, 27 de dezembro de 2012 19:06
    quinta-feira, 27 de dezembro de 2012 17:08
  • Boa_Vida

    Não é por causa do Environment.NewLine?

    sexta-feira, 28 de dezembro de 2012 18:43
  • Alvaro,

    Tente serializar a sua lista direto:

    context.Response.Write(new JavaScriptSerializer().Serialize(alunos.Select(a => a.Nome).ToList());



    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/



    • Editado Vitor Mendes sexta-feira, 28 de dezembro de 2012 19:03
    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    sexta-feira, 28 de dezembro de 2012 19:01
  • Olá Vitor, sua solução funcionou é mostrado o nome na posição horizontal, mas ele traz apenas um nome por vez, por exemplo: se tiver 3 ANA MARIA, e eu digitar no autocomplete ANA traz apenas uma ANA MARIA é como se onde tem (a.Nome.Contains(nomeAluno) não funcionasse como deveria 

    Álvaro Luiz

    sábado, 29 de dezembro de 2012 01:52
  • Álvaro,

    Acho estranha não retornar mais de uma Ana Maria, fiz um teste aqui com itens duplicados, com o mesmo exemplo que postei la acima e trouxe os itens duplicados, veja:



    Sera que seu retorno do banco de dados esta correto ?? tente executar este mesmo T-Sql e veja oque retorna.

    Vitor Mendes | Seu feedback é muito importante para todos!
    Visite o meu site: http://www.vitormendes.com.br/

    • Marcado como Resposta Álvaro Luiz quinta-feira, 3 de janeiro de 2013 13:56
    quarta-feira, 2 de janeiro de 2013 13:12
  • Olá Vitor a o método que faz o select e filtra é essa mesma que tá em negrito, tenho ele em outras telas e funciona ok, mas aqui só traz um nome por vez no autocomplete

    IList<Aluno> alunos = acaoAluno.ObterTodosPor(a => a.Funcao.Equals("ALUNO") && a.Nome.Contains(nomeAluno), new Expression<Func<Aluno, object>>[] { a => a.Nome});
                foreach (var aluno in alunos )
                {
                   context.Response.Write(new JavaScriptSerializer().Serialize(alunos.Select(a => a.Nome).ToList());    

                }



    Vou mandar o código completo:

    ------------ lado cliente javascript---------------

     $("#tags").autocomplete({
                    source: MyHandler.ashx,
                    minLength: 1,
                    select: function (event, ui) {
                        alert('você selecionou: ' + ui.item.label);
                        $('#autocomplete').val(ui.item.label);
                        return false;
                    }
                });

    -----------------MyHandler.ashx-------------------

    public class MyHandler : IHttpHandler
    {
        private IGerenteTransacao gerente;
        private IAcao<Aluno> acaoAluno;

        public void ProcessRequest(HttpContext context)
        {
            string nomeAluno = HttpContext.Current.Request.Params["term"];
            if (nomeAluno != null)
            {
                List<string> result = new List<string>();

                this.gerente = new GerenteTransacaoBase();
                this.acaoAluno = this.gerente.ObterAcao<Aluno>();

                IList<Aluno> alunos = acaoAluno.ObterTodosPor(a => a.Funcao.Equals("ALUNO") && a.Nome.Contains(nomeAluno), new Expression<Func<Aluno, object>>[] { a => a.Nome });

                //while (alunos.IsReadOnly)    ----> TENTEI ISSO E NÃO DEU CERTO
                //{
                //    result.Add(alunos.ToString());
                //    context.Response.Write(result.ToList());
                //}

                //foreach (var aluno in alunos )  ----> TENTEI ISSO E NÃO DEU CERTO
                //{                
                //    result.Add(aluno.ToString());
                //    context.Response.Write(result);                
                //} 

                foreach (var aluno in alunos)  // AQUI DÁ CERTO MAS TRÁS APENAS UM NOME POR VEZ
                {
                    context.Response.Write(new JavaScriptSerializer().Serialize(alunos.Select(a => a.Nome).ToList()));
                }
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }



    • Editado Álvaro Luiz quarta-feira, 2 de janeiro de 2013 17:36
    quarta-feira, 2 de janeiro de 2013 17:21
  • Sei que esse post é antigo, mas estou com o mesmo problema e preciso da mesma solução porém ao clicar no textbox eu preciso que todos os itens fiquem visíveis. Como posso fazer isso? Alguém pode me ajudar?

    Wallace Carlos

    quarta-feira, 19 de agosto de 2015 20:49