8 de mayo de 2010

jQuery Autocomplete Facebook con ASP.Net

jQuery Autocomplete Facebook_thumb[2]

Veremos un ejemplo simple de como implementar jQuery Autocomplete Facebook en ASP.Net.

Hace unos meses atrás escribí un post sobre como implementar un Autocomplete con jQuery UI. En esta ocasión pretendo usar otro plugin jQuery autocomplete (FCBKcomplete). Este es un interesante plugin jQuery con el que podemos dotar a nuestras páginas de un vistoso autocomplete al estilo Facebook para seleccionar múltiples opciones.

 

jQuery Facebook Autocomplete

Con este artículo pretendo que veamos el código completo asociado a un ejemplos simple de implementación del plugin jQuery FCBKcomplete, un ejemplo muy básico, si deseas profundizar un poco más en las distintas opciones recomiendo visiten la página oficial del plugin.

Pero vayamos a la práctica. El objetivo de la página que desarrollaremos será el de obtener algo similar a la imagen del encabezado de este post; o sea; tendremos una caja en la que escribiremos el nombre de una compañía aérea y el autocomplete se activará mostrando las aerolíneas coincidentes. Veamos el código de ejemplo:

jQuery Autocomplete Facebook Ejemplo, ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryAutocompleteFacebook.aspx.cs" Inherits="jqAutocompleteFacebook" %>

<html xmlns="http://www.w3.org/1999/xhtml"> 

  <head> 

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 

    <title>jQuery AutoComplete Facebook Demo</title> 

    <link rel="stylesheet" href="fcbkcomplete.css" type="text/css" media="screen" 

      title="Test Stylesheet" charset="utf-8" /> 

    <script src="jquery.js" type="text/javascript" charset="utf-8"></script> 

    <script src="jquery.fcbkcomplete.min.js" type="text/javascript"></script>   

  </head> 

  <body> 

    <form id="form1" runat="server"> 

      <div> 

        <label>Seleccione la Aerolínea:</label> 

        <asp:DropDownList ID="cmbAerolineas" runat="server" ></asp:DropDownList> 

      </div> 

    </form> 

    <script type="text/javascript"> 

      $(document).ready(function () {

        $("#cmbAerolineas").fcbkcomplete({ maxitems: 3 });

      });

    </script> 

  </body>

</html> 

Comentemos un poco el código aspx:

  1. Inicialmente hacemos las referencias respectivas al css, y a las 2 bibliotecas (jQuery.js y fcbkcomplete.min.js)
  2. Lo próximo relevante que hacemos es incluir el DropDownList que contendrá todas las aerolíneas, a partir de las cuales filtraremos los datos a mostrar y seleccionar.
  3. Posteriormente enlazamos el plugin jQuery (Autocomplete Facebook) con el DropDownList (cmbAerolineas), además definimos la propiedad maxitems que nos sirve para delimitar el máximo número de aerolíneas a seleccionar.

Hasta aquí el código de la página aspx, pero nos falta el llenado de los datos del DropDownList (FCBKcomplete). La carga de estas aerolíneas pudimos haberla hecho directamente en el aspx, pero prefiero hacerlo desde el code-behind para hacer el ejemplo más parecido a un caso real.

 

jQuery Autocomplete Facebook Ejemplo, Code-Behind

public partial class jqAutocompleteFacebook : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

  {

    if (Page.IsPostBack) return;

    var lstCodigos = new List<KeyValuePair<string, string>>();

    lstCodigos.Add(new KeyValuePair<string, string>("CU", "Cubana"));

    lstCodigos.Add(new KeyValuePair<string, string>("IB", "Iberia"));

    lstCodigos.Add(new KeyValuePair<string, string>("TP", "Tap Portugal"));

    lstCodigos.Add(new KeyValuePair<string, string>("UX", "Air Europa"));

    lstCodigos.Add(new KeyValuePair<string, string>("U1", "Air France"));

    lstCodigos.Add(new KeyValuePair<string, string>("U2", "Air Belrlin"));

    lstCodigos.Add(new KeyValuePair<string, string>("U3", "Air Derbis"));  

    cmbAerolineas.DataValueField = "key";

    cmbAerolineas.DataTextField = "value";

    cmbAerolineas.DataSource = lstCodigos;

    cmbAerolineas.DataBind();

  }

}

y Hasta aquí el ejemplo, espero te sea de utilidad...

Nota:
Este plugin (jQuery Autocomplete Facebook) tiene algunas otras propiedades interesantes que te ayudan a personalizar su comportamiento, para más información visita la página oficial.

 

Nota:
Además de este plugin, si lo deseas puedes usar el widget jQuery UI Autocomplete que también implementa la selección múltiple, para más información visita mi artículo sobre Autocomplete con jQuery UI o la página oficial.

 

Artículos relacionados:

8 comentarios:

  1. Hola, muy bueno el post.
    La pregunta es como hago para obtener los items seleccionados, ya que CmbAerolineas.Items[i].Selected, no me funciona.
    Muchas Gracias

    ResponderEliminar
  2. lo hice funcionar en vs2008, pero no me funciona en vs2010

    ResponderEliminar
  3. El cbo no toma el css, solo se completa como Combo puede ser ?

    ResponderEliminar
  4. Este hubiera sido un buen post si solo hubiera explicado como obtener los items seleccionados. :S

    ResponderEliminar
  5. Hola porfavor ... quisiera saber como recuperar los valores que seleccioné.

    ResponderEliminar
  6. Como rcupero los valores que seleccione

    ResponderEliminar
  7. buenas aportaciones hay en esta pagina
    espero que sigan asi

    ResponderEliminar
  8. como obtener solo el id para luego guardarlo en la base de datos

    ResponderEliminar