none
Autocomplete jQuery com handler RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Á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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Boa_Vida

    Não é por causa do Environment.NewLine?

    sexta-feira, 28 de dezembro de 2012 18:43
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Á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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |