Autocomplete do jQuery e ASP.NET

Eu procurei por todo este site e pela web por um exemplo simples e bom de autocomplete usando jQuery e ASP.NET. Eu queria expor os dados usados ​​pelo preenchimento automático com um serviço da web (e provavelmente o próximo). Enquanto isso, eu tenho esse trabalho, mas parece um pouco hacky …

Na minha página eu tenho uma checkbox de texto:

 

Estou usando o preenchimento automático do jQuery, configurado de acordo com o exemplo deles:

     

Aqui é onde ele começa a ficar hacky … eu chamo uma página em vez de um webservice:

   $(document).ready(function(){ $("#txtSearch").autocomplete('autocompletetagdata.aspx'); });  

Na página, removi TODOS os html e só tenho isso (caso contrário, vários bits HTML aparecem no menu suspenso do preenchimento automático):

  

E no meu autocompletetagdata.aspx, estou usando o SubSonic para consultar, formatar e retornar dados do database (um item de dados por linha):

 protected void Page_Load(object sender, EventArgs e) { // Note the query strings passed by jquery autocomplete: //QueryString: {q=a&limit=150&timestamp=1227198175320} LookupTagCollection tags = Select.AllColumnsFrom() .Top(Request.QueryString["limit"]) .Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%") .OrderAsc(LookupTag.Columns.TagDescription) .ExecuteAsCollection(); StringBuilder sb = new StringBuilder(); foreach (LookupTag tag in tags) { sb.Append(tag.TagDescription).Append("\n"); } Response.Write(sb.ToString()); } 

Se você não fizer uma consulta LIKE, ela retornará tudo o que contiver uma correspondência para o (s) caractere (s) que você digita – por exemplo, digitar “a” includeá “Ask” e “Answer”, bem como “March” e “Mega” Eu só queria fazer um começo com partida.

De qualquer forma, funciona e é muito fácil de configurar, mas existe uma maneira melhor?

Acabei de implementar o preenchimento automático recentemente e parece bastante semelhante. Eu estou usando um ashx (Generic Handler) em vez do aspx, mas é basicamente o mesmo código no código por trás.

Usando o ashx, será algo como isto:

  [WebService(Namespace = "http://www.yoursite.com/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class AutocompleteTagData : IHttpHandler { public void ProcessRequest(HttpContext context) { // Note the query strings passed by jquery autocomplete: //QueryString: {q=a&limit=150&timestamp=1227198175320} LookupTagCollection tags = Select.AllColumnsFrom() .Top(context.Request.QueryString["limit"]) .Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%") .OrderAsc(LookupTag.Columns.TagDescription) .ExecuteAsCollection(); foreach (LookupTag tag in tags) { context.Response.Write(tag.TagDescription + Environment.NewLine); } } public bool IsReusable { get { return false; } } } 

Acabei de postar isso em outra pergunta, mas você pode replace a function de análise no plug-in de preenchimento automático do jQuery para torná-lo compatível com qualquer saída.

Exemplo:

  $("#< %= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", { parse: function(data) { var parsed = []; $(data).find("string").each(function() { parsed[parsed.length] = { data: [$(this).text()], value: $(this).text(), result: [$(this).text()] }; }); return parsed; }, dataType: "xml" }); 

Tudo isso espera é uma matriz de strings para XML … Muito fácil de fazer … Se você estiver usando SubSonic, você deve verificar o RESTHandler (É um GEM oculto !!!), ele suporta consultas básicas em todos os seus objects e pode retornar JSON / XML. Aqui está um exemplo de consulta usando …

/Demo/services/Customers/list.xml?CustomerName=JOHN

Se você alterar list.xml para list.json, ele alterará os resultados para JSON. A solicitação acima retornará a entidade “Cliente” fortemente tipificada. Você pode alterar o parâmetro para suportar LIKE, NOT LIKE, etc … Muito poderoso e todo o encanamento é feito …

Aqui está um vídeo sobre isso: http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/

O serviço da web ou um serviço WCF lhe dará o potencial para uma interface melhor. Ambos também podem ser configurados para serialização do Json.

Desde que eu estou tomando uma class WCF enquanto escrevo (estou em um intervalo, realmente!), Vou esboçar o método WCF.

 [OperationContract] [WebInvoke(RequestFormat=WebMessageFormat.Json, ResponseFormat=WebMessageFormat.Json)] public LookupTagCollection LookupTags( int limit, string q ) { return Select.AllColumnsFrom() .Top(limit) .Where(LookupTag.Columns.TagDescription) .Like(q+ "%") .OrderAs(LookupTag.Columns.TagDescription) .ExecuteAsCollection(); } 

LookupTagCollection precisa ser Serializable.

Jquery 1.8 O preenchimento automático usa “termo” e não “q” como o parâmetro querystring. esta é a versão curta e doce que eu implementei. Espero que isso ajude alguém.

Javascript:

 $(function () { $("#autocomplete").autocomplete({ source: "/pathtohandler/handler.ashx", minLength: 1, select: function (event, ui) { $(this).val(ui.item.value); } }); }); 

Manipulador ASHX:

 public class SearchHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { var term = context.Request.QueryString["term"].ToString(); context.Response.Clear(); context.Response.ContentType = "application/json"; var search = //TODO implement select logic based on the term above JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); string json = jsSerializer.Serialize(search); context.Response.Write(json); context.Response.End(); } public bool IsReusable { get { return false; } } }