none
autocompletar TextBox utilizando jquery e linq RRS feed

  • Pergunta

  • Bom dia, 

    Se alguém puder ajudar, tenho um textbox,  e gostaria de colocar a função de auto completar quando o usuário digitar, eu utilizo linq e jquery na minha aplicação, meu banco é sql server.....

    Obrigado a todos.... 

    segunda-feira, 17 de dezembro de 2012 11:38

Respostas

  • Marcos,

    Acho que na pressa não me atentei ao que fiz, altere esta linha no C#:
    return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.Contains(procurar)).ToList();

    Por:
    return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.StartsWith(procurar, StringComparison.OrdinalIgnoreCase)).ToList();

    Não caso quando se usar o método Contains() ele vasculha a string e se conter oque foi digitado acaba retornando. No caso quando digita a letra "a" a palavra "Erlang" contem a letra "a" e por isso é retornado.

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

    • Marcado como Resposta Marcos Bazilio terça-feira, 18 de dezembro de 2012 19:09
    terça-feira, 18 de dezembro de 2012 11:26

Todas as Respostas

  • Marcos,

    No fórum não me lembro de algum exemplo usando de LINQ, mais existe diversos sobre autocomplete. Na internet tem diversos, vejas estes links, espero que te ajude:

    http://ajaxme.blogspot.com.br/2010/11/creating-auto-complete-box-using-aspnet.html
    http://forums.asp.net/p/1663801/4348152.aspx
    http://yasserzaid.wordpress.com/2010/09/03/jquery-autocomplete-with-linq/

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

    segunda-feira, 17 de dezembro de 2012 12:10
  • Vitor valeu, 

    Mas mesmo seguindo a risca o exemplo, não funcionou para mim.... não sei onde estou errando, simplesmente o TextBox não tem nenhuma sugestão

    segunda-feira, 17 de dezembro de 2012 12:30
  • Marcos,

    Tenho alguns questionamentos:

    O autocomplete simplesmente não aparece ?
    Você esta aplicando de maneira correta o jQuery no TextBox ?
    Teria como você postar o seu HTML da pagina ?
    Você esta usando Update Panel ?


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

    segunda-feira, 17 de dezembro de 2012 12:37
  • o textbox aparece, mas não autocompleta a partir da minha digitação..., estou seguindo o exemplo... 

    meu aspx tá assim....

    <td style="vertical-align: top;" class="style1">
                <fieldset>
                    <div>
                        <asp:Label ID="LabelConsultaProduto" runat="server" Text="CONSULTA POR PRODUTO"></asp:Label><br />
                        <asp:TextBox ID="TextConsultaProduto" runat="server" Width="142px" ></asp:TextBox><br />
                        <asp:Button ID="ButtonConsultaProduto" runat="server" Text="Consulta" OnClick="BtnConsultaProduto_Click" />
                    </div>
                    <br />

    o script tá assim

    <script language="javascript" type="text/javascript"> $(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#TextConsultaProduto").autocomplete({ source: availableTags });

    </script>


    segunda-feira, 17 de dezembro de 2012 13:07
  • desse jeito que eu postei... consegui trazer, agora em vez de utilizar a var availableTags eu preciso que busque de uma consulta feita no code....
    segunda-feira, 17 de dezembro de 2012 13:44
  • Aqui vai um exemplo Marcos,

    Não se esqueça de referenciar o CSS e o jQuery corretamente.

    .cs da pagina:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web.Services;
    using System.Web.Script.Services;
    
    namespace WebApplication11
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            [WebMethod()]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static List<string> Buscar(string procurar)
            {
                List<string> lista = 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"		
                };
    
                return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.Contains(procurar)).ToList();
            }
        }
    }

    .aspx da pagina:
    <%@ 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 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: function (request, response) {
                        $.ajax({
                            url: '<%=ResolveUrl("~/WebForm1.aspx/Buscar") %>',
                            data: "{ 'procurar': '" + request.term + "'}",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                response($.map(data.d, function (item) {
                                    return {
                                        label: item.split('-')[0],
                                        val: item.split('-')[1]
                                    }
                                }))
                            },
                            error: function (response) {
                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:TextBox ID="TextConsultaProduto" runat="server" Width="142px"></asp:TextBox><br />
        </form>
    </body>
    </html>
    

    Procura estudar bastante CSS e jQuery, é imprescindível saber isso nos dias de hoje, veja este link para mais detalhes:

    http://aspsnippets.com/Articles/Implement-jQuery-Autocomplete-using-Web-Service-in-ASP.Net.aspx


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

    segunda-feira, 17 de dezembro de 2012 15:47
  • estou usando esse exemplo.. 

    http://forums.asp.net/p/1663801/4348152.aspx

    só que ele retorna só um produto... 

    tenho problema em fazer a lista na consulta linq.... estou fazendo dessa forma...

    using (var ctx = new CtxEntities())
                {
                   
                        var sortedDoubles = from d in ctx.produto
                                         // orderby d descending
                                        select new
                                       {
                                           value = d.idProduto,
                                           label = d.nomeProduto,
                                       };
                
    
                            var obj = sortedDoubles.ToArray();
                            
               
    
                    System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
                    string data = jss.Serialize(obj);
                    ClientScript.RegisterClientScriptBlock(Page.GetType(), "scr", " var dataArray=" + data, true);

    Ele ta passando o value e o label... só que retorna o produto se eu fazer 

     $(document).ready(function () {
                $("#autocomplete").autocomplete({
                    source: function (request, response) {
                        response($.map(dataArray, function (item) {
                            if (item.label.indexOf($("#autocomplete").val()) == 2) {
                                return {
                                    label: item.label,
                                 //   value: item.value
                                }
                            }
                        }))
                    },
                    minLength: 1
                });
            });

    == 2... ai ele me volta o idProduto 2... entendeu.... onde eu tô errando?

    Kra, valeu pela paciência... 

    segunda-feira, 17 de dezembro de 2012 16:46
  • Marcos,

    Tente remover este "if" do jQuery:

     $(document).ready(function () {
                $("#autocomplete").autocomplete({
                    source: function (request, response) {
                        response($.map(dataArray, function (item) {
                                return {
                                    label: item.label,
                                 //   value: item.value
                                }
                            
                        }))
                    },
                    minLength: 1
                });
            });


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

    segunda-feira, 17 de dezembro de 2012 17:01
  • já tinha removido... mas ficou com a função de dropdownlist.... ele lista todos os produtos do banco... independente da letra inserida no textbox...
    segunda-feira, 17 de dezembro de 2012 18:38
  • Marcos,

    Tente usar do exemplo que postei alguns posts acima, eu testei ele e funcionou direitinho.

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

    segunda-feira, 17 de dezembro de 2012 22:34
  • Vitor, testei o que vc postou.... quando digito o "a" por exemplos ele carrega as palavras desordenadas.. e não as que começam com "a"... entendeu.?
    terça-feira, 18 de dezembro de 2012 11:13
  • Olha o exemplo... tem a palavra Action Script.... e ele não trouxe...

    terça-feira, 18 de dezembro de 2012 11:15
  • Marcos,

    Acho que na pressa não me atentei ao que fiz, altere esta linha no C#:
    return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.Contains(procurar)).ToList();

    Por:
    return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.StartsWith(procurar, StringComparison.OrdinalIgnoreCase)).ToList();

    Não caso quando se usar o método Contains() ele vasculha a string e se conter oque foi digitado acaba retornando. No caso quando digita a letra "a" a palavra "Erlang" contem a letra "a" e por isso é retornado.

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

    • Marcado como Resposta Marcos Bazilio terça-feira, 18 de dezembro de 2012 19:09
    terça-feira, 18 de dezembro de 2012 11:26
  • PERFEITO !!!!

    Agora vou tentar fazer a lista com dados do banco...

    terça-feira, 18 de dezembro de 2012 11:43
  • Tentei dessa forma.... mas não estou conseguindo..

     [WebMethod()]
            [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
            public static List<string> Buscar(string procurar)
            {
                OpenBarBDEntities context = new OpenBarBDEntities();
                
                var consulta = (from e in context.produto
                    select e);
    
                List<string> ObjOc = new List<string>();
    
                var cont =  consulta.Count();
    
                for (int i = 0; i < cont; i++)
                {              
                    foreach (var p in consulta)
                    {
                        string nome = p.nomeProduto; 
    
                        ObjOc.Add(nome);
    
                    }
                }      
                    return string.IsNullOrEmpty(procurar) ? ObjOc : ObjOc.Where(f => f.Contains(procurar)).ToList();
                }

    Você tem alguma sugestão....??

    terça-feira, 18 de dezembro de 2012 13:47
  • Marcos,

    Notei que você esta usando o método Contains(), não sei se realmente era isso que você queria, pois você testou o exemplo com o método StartWith(), veja este e tente dizer oque acontece, nenhum erro é disparado, nada ??

    [WebMethod()]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<string> Buscar(string procurar)
    {
    	using(OpenBarBDEntities context = new OpenBarBDEntities())
    	{	
        
    		return 
    			string.IsNullOrEmpty(procurar) 
    				? context.produto.Select(f => f.nomeProduto).ToList() 
    				: context.produto.Where(f => f.StartsWith(procurar)).Select(f => f.nomeProduto).ToList();
    	}
    }


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

    terça-feira, 18 de dezembro de 2012 18:58
  • fiz assim....

     var dados = (from p in contexto.produto
                                 select p.nomeProduto).Distinct();
                    foreach (string x in dados)
                        lista.Add(x);
                    return string.IsNullOrEmpty(procurar) ? lista : lista.Where(f => f.StartsWith(procurar, StringComparison.OrdinalIgnoreCase)).ToList();

    Agora esta buscando...

    terça-feira, 18 de dezembro de 2012 19:10
  • Obrigado pela força Vitor.... valeu msm
    terça-feira, 18 de dezembro de 2012 19:12