Autocompletar con jquery y ASP.NET

[+] Llevo 3 semanas investigando como dar la funcionalidad de auto-completado a un cuadro de texto con jquery, probé con Servicios Web, pero al instalar la aplicación en el servidor, tronó como ejote, pedí un consejo a mi gurú (Francisco Ruiz) y me recomendó no usar más los Servicios Web y usar métodos de página, así que así fue como lo logré:


1. Cree una clase que contiene un método estático quién se encargará de consultar los datos para la funcionalidad de autocompletado.

public class Listas

{

   public static String obtenerClientes()

   {

      //Para obtener el origen de datos para el autocompletado.
      StringBuilder clientes = new StringBuilder();

      DataTable dtTemp = new DataTable();

      String SQL = "SELECT nombre FROM clientes";

      using(SqlCommand objCmd = new SqlCommand(SQL, objCnn))

      {

         using(SqlDataAdapter objAdapt = new SqlDataAdapter(objCmd))
         { objAdapt.Fill(dtTemp); }

      }


      //Se debe dar un formato con ":" entre cada elemento.
      foreach(DataRow dr in dtTemp.Rows)
      { clientes.Append(String.Format("{0}:", dr["nombre"].toString())); }
      //Se elimina el ultimo ":"
      clientes =  clientes .Remove( clientes .Length - 1, 1); 

      
      return clientes.toString();

   }

}

2. En cada página ASPX que requiere la funcionalidad, se define un método publico-estático que invocará al método de la clase definida previamente.



[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static String ListarClientes()
{
   //Para llamar al método que consume la lista de clientes.
   return Listas. obtenerClientes ();
}


Nota: para los atributos [WebMethod] y [ScriptMethod(ResponseFormat = ResponseFormat.Json)], se requieren los siguientes namespaces:

• System.Web.Script.Services;
• System.Web.Services;

3. En la página ASPX y para efecto de éste ejemplo llamaremos clientes.aspx llevará un fragmento del código HTML con el control input utilizado para la funcionalidad de auto-completado:


...
<input id="txtBuscar" type="text" name="txtBuscar" />
...


4. El código jquery para consumirlo es el siguiente:


var datafromServer;

$.ajax({
   type: "POST",
   url: "clientes.aspx/ ListarClientes",
   dataType: "json",
   data: "{}",
   contentType: "application/json; charset=utf-8",
   success: function (data) 
   {
      datafromServer = data.d.split(":");
      $('#txtBuscar').autocomplete(
      { source: datafromServer });
   },
   error: function (XMLHttpRequest, textStatus, errorThrown) 
   { alert(textStatus);}
});


Argumentos importantes:

• url: El url se conforma por el nombre de la página, por supuesto que será la de la propia página y el nombre del método que queremos llamar.
• contentType debe llevar el valor "application/json; charset=utf-8", para llevar acabo la serialización y que no haya ningún problema con la "traducción" del formato de ASP.NET y jquery.
• Notese la siguiente línea datafromServer = data.d.split(":"); que indica como debe separarse cada elemento que se mostrará en el auto-completado, por esta razón es que el método que trae los datos de la base de datos formatea la cadena resultante con ":".

Espero sea de ayuda para alguien, cualquier comentario al respecto, es bienvenido.


Saludos...!