29 de marzo de 2010

Cargar JS Dinámico (Dinámicamente)

Veamos un ejemplo de como cargar desde el cliente (JavaScript) un fichero .js externo que se encuentra en el servidor, usando peticiones GET HTTP.

Como Cargar JavaScript Externo desde JavaScript

Recientemente, a un colega se le dio la necesidad de dadas ciertas circunstancias, cargar un javascript u otro. Una solución pasaba por cargar ambos ficheros javascript, aún sabiendo que solo usaría una de los 2, es decir uno de ellos se cargaría innecesariamente, acarreando los derivados problemas de rendimientos.

La solución fue bastante sencilla, solo fue necesario usar jQuery y el método .getScript(), pero veamos un ejemplo. (Puedes ver una demo del ejemplo en el enlace Cargar JavaScript Dinámicamente)

jQuery getScript

Como siempre veamos un ejemplo de como usar el método .getScript() de jQuery. El ejemplo no tiene demasiado sentido, es solo para dar una idea de uso de este interesante método jQuery.

CargarJSImaginemos que tenemos una página web con 2 botones, el segundo botón realiza una acción para la cual hace uso de una función JavaScript que no se carga inicialmente con la pagina; y dicha función JavaScript se encuentra en un fichero .js que será cargado dinámicamente al hacer click en el primer botón (Cargar JS). Por ende, si hiciéramos click en el segundo botón (Ejecutar Acción) sin haber pinchado antes el  el primer botón (Cargar JS), pues el resultado no será el esperado.

Ver demo Cargar JavaScript Dinámicamente.

Código Ejemplo .getScript() de jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ejemplo: Cargar JS Externo</title>
 
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 
  <script type="text/javascript">
    $(document).ready(function () {
 
      $('#btnCargarJs').click(function () {
        $.getScript('http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31');
      });
 
      $('#btnBlockPage').click(function () {
        $.blockUI({
          css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
          }
        });
 
        setTimeout($.unblockUI, 2000);
        return true;
      });
 
    });
  </script>
</head>
<body>
    <div>
      <div>Antes de ejecutar (Bloquear Pantalla), debemos (Cargar JS).</div><br />
      <input type="button" id="btnCargarJs" value="Cargar JS" />
      <input type="button" id="btnBlockPage" value="Bloquear Pantalla X 2 seg." />
    </div>
</body>
</html>

Nota: La función .getScript() de jQuery, además tiene un segundo parámetro, una función callback que es ejecutada después de descargado el fichero .js.

 

Artículos relacionados:

25 de marzo de 2010

DDD Arquitectura N-Capas (Orientación al Dominio)

El pasado 24 de marzo, tuve la oportunidad de participar en este interesante evento para Arquitectos organizado por Microsoft España.

DDD (Domain Driven Design N-Layered)

El principal objetivo del evento fue presentarle a la audiencia, el borrador de una excelente guía de Arquitectura de N-Capas Orientada al Dominio. Pero creo que el principal éxito del evento y también de la guía, pasa por la forma en que es presentada, analizando cada una de las capas de forma práctica, ajustándola a las nuevas tecnologías Microsoft que se avecinan (VS 2010 y .NET 4.0).

Arquitectura n-Capas 

En el evento fuimos viendo un ejemplo práctico de implementación de esta arquitectura usando el Framework .NET 4.0, C# y Entity Framework 4.0, además de ver algunas otras cosillas (AppFabric, WIF, WCF). El proyecto se puede descargar desde codeplex en el siguiente enlace. Y el libro en formato pdf podrás descargarlo de forma gratuita aquí.

Nota: Mas adelante continuaré escribiendo algunos post mas específicos sobre esta Guía de Arquitectura de N-Capas Orientada al Dominio. Pero es importante destacar (como bien dice Cesar de la Torre), que esta arquitectura está orientada fundamentalmente a proyectos complejos.

Artículos Relacionados:

23 de marzo de 2010

Enum C# Tips (Enumeraciones)

Las enumeraciones (enum) son tipos que agrupan un conjunto de constantes, veamos un ejemplo de enumeración.

Enum en C#, Ejemplo Básico

enum TipoDocumento
{
    DNI, // 0
    NIE, // 1
    Pasaporte, // 2
    Otro = 99
};

Nota: El tipo predeterminado subyacente de las enumeraciones es el int y el primer enumerador tiene valor 0, incrementándose sucesivamente en 1 (A menos que definamos otra cosa).

Veamos ahora como usar las enumeraciones, veamos un ejemplo de uso:

TipoDocumento var1 = TipoDocumento.DNI;
 
string strVar1 = var1.ToString();
 
TipoDocumento var2 = (TipoDocumento)2;
TipoDocumento var3 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), "NIE");
TipoDocumento var4 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), strVar1);
TipoDocumento var5 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), "2");
TipoDocumento var6 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), "99");
TipoDocumento var7 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), "Pasaporte");
TipoDocumento var8 = (TipoDocumento)Enum.Parse(typeof(TipoDocumento), "PASAPORTE");
//Esta última línea da un Error: Requested value 'PASAPORTE' was not found.

El resultado de estas variables sería el siguiente:

Enumeraciones

Nota: Un enumerador no puede contener espacio en blanco en su nombre.

 

Enum to List (Convertir Enumerador en Lista)

Muchas veces surge la necesidad de convertir un tipo de enumerador (enum) en una lista (Código, Descripción), por ejemplo para asociar dicha enumeración o enumerador a un combo box o lista desplegable, o cualquier otro control. Para ello podemos crearnos algún método extensor que nos facilite esta tarea.

Método Extensor (Enum to List)

El objetivo de nuestro ejemplo es poder hacer lo siguiente:

cmbTipoDocumentos.DataSource = typeof(TipoDocumento).ToCodigoDescripcion();
cmbTipoDocumentos.DataBind();

Donde 'ToCodigoDescripcion()' es un método extensor que nos devolverá una lista de cada elemento existente en el enumerador TipoDocumento, con la estructura (Código, Descripción) pero veamos la implementación del método extensor en cuestión:

public static List<CodigoDescripcion> ToCodigoDescripcion(this Type enumType)
{
  var arrValues = Enum.GetValues(enumType);
  var arrNames = Enum.GetNames(enumType);
 
  List<CodigoDescripcion> lstCodigos = arrNames.Select((name, index) =>
     new CodigoDescripcion
     {
       Codigo = arrValues.GetValue(index).GetHashCode().ToString(),
       Descripcion = name
     }).ToList();
 
  return lstCodigos;
}
 
public class CodigoDescripcion
{
  public string Codigo { get; set; }
  public string Descripcion { get; set; }
}
En este mismo método (ToCodigoDescripcion) estamos usando la clase (CodigoDescripcion) definida por nosotros; una posible variante pasaría por usar la estructura de .Net (KeyValuePair) que es muy similar a la creada por nosotros. De esta forma no tendríamos la necesidad de crear la clase, y el código quedaría de la siguiente manera:
 

public static List<KeyValuePair<string, string>> ToCodigoDescripcion(this Type enumType)

{

  var arrValues = Enum.GetValues(enumType);

  var arrNames = Enum.GetNames(enumType);

 

  List<KeyValuePair<string, string>> lstCodigos =

    arrNames.Select((name, index) => new KeyValuePair<string, string>(

      arrValues.GetValue(index).GetHashCode().ToString(), name)).ToList();

 

  return lstCodigos;

}

 

Nota:
Particularmente me gusta más esta segunda variante, pero queda a tu elección cuál de ellas aplicar. Además entiendo que la primera variante es mucho más fácil de leer.

 

Nota:
Posiblemente exista alguna otra forma más eficiente de implementar el método extensor anterior, si se te ocurre alguna no dudes en compartirla.

 

Artículos Relacionados:

19 de marzo de 2010

jQuery BlockUI, Bloquear Página

BLOCKUI es un interesante Plugin jQuery que nos sirve para bloquear la interacción del usuario en una página (o en parte de una página). El uso de blockUI es muy eficaz cuando necesitamos, dada una acción determinada, bloquear la pagina y desbloquearla al finalizar dicha acción.

Últimamente en mi trabajo hemos estado haciendo uso de este plugin, y les garantizo que es muy sencillo de implementar y altamente configurable; con unas pocas líneas podemos lograr el usadísimo "Please wait" o "Por favor espere…" o “Cargando… / Loading…”

Normalmente suelo incluir en mis post algún ejemplo, pero en este caso la página oficial esta muy bien lograda, así que prefiero redireccionarlos allí:

 

Artículos relacionados:

14 de marzo de 2010

LINQ to Object, Resumen

Resumen sobre las principales características de Linq to Object con C#. Veremos las cosas más importantes y que deben conocerse para trabajar con LINQ to Object.

En días pasados escribí algunos artículos que pretendo agrupar en esta nueva entrada, además expondré en este post futuros artículos sobre LINQ to Object:

  1. LINQ Left Join.
  2. LINQ Distinct.
  3. LINQ Except.
  4. LINQ Intersect.
  5. LINQ Union.
  6. LINQ Concat.

Nota: A medida que vaya escribiendo sobre otros métodos LINQ, los iré agregando en esta lista.

 

Artículos Relacionados:

11 de marzo de 2010

jQuery Métodos y Eventos Interesantes

Con este post pretendo compartir con ustedes algunos eventos y métodos jQuery que me parecen curiosos e interesantes.

Métodos jQuery

Método jQuery is()

El método is() de jQuery devuelve verdadero si alguno (al menos 1) de los objetos jQuery del selector coincide con la condición pasada como parámetro.

Veamos un ejemplo:

if ($('button').is('.ClasePrueba')) alert('Prueba is...');

if ($('#pnlMostrar').is(':hidden')) alert('El panel MOSTRAR está oculto.');

En este ejemplo, el método jQuery is() devolverá true si en la página web existe algún 'button' con la clase '.ClasePrueba'.

Nota: Este mismo resultado podemos obtenerlo usando el método jQuery .hasClass(), pero el método .is() es más flexible y universal.

 

Métodos jQuery Ocultar y Mostrar

Son varios los métodos que jQuery pone a nuestra disposición para mostrar y ocultar elementos del DOM, la diferencia principal consiste en el efecto aplicado, estos métodos jQuery son:

  • $(Selector).hide('velocidad')
  • $(Selector).show('velocidad')
  • $(Selector).fadeIn('velocidad')
  • $(Selector).fadeOut('velocidad')
  • $(Selector).toggle('velocidad')
  • $(Selector).slideToggle('velocidad')

 

Método jQuery trigger()

El método trigger() de jQuery lanza o dispara un evento determinado.

Veamos un ejemplo:

$('button').trigger('click');

En este ejemplo, el método jQuery trigger() lo que hace es forzar o simular como si el usuario hubiese hecho clic en el botón, por lo que se ejecutará el código asociado a este ejemplo.

 

Método jQuery parseJSON()

El método parseJSON() de jQuery convierte la cadena (string) pasada como parámetro en un objeto javascript. La cadena debe estar formateada como JSON.

Veamos un ejemplo:

var obj = $.parseJSON('{"Nombre": "Derbis"}');
alert( obj.Nombre === "Derbis" );

Esta función parseJSON fue incorporada a partir de la versión jQuery 1.4.1.

 

Nota: Iré agregando otros métodos y eventos jQuery que me resulten interesantes. Si conoces alguno que pueda ser de interés para la comunidad no dudes en compartirlo… ¡gracias de antemano!

 

Artículos Relacionados:

7 de marzo de 2010

Autocomplete JQuery UI en ASP.Net (Autocompletar)

jQueryUI_thumb1

Veremos un ejemplo de como implementar jQuery UI Autocomplete en ASP.Net o también conocido como Autocompletar de jQueryUI. Podrás además descargarte el código fuente.

Hoy hablaremos de la colección de componentes jQuery UI, y en particular del control Autocomplete. En esta biblioteca de componentes basada en jQuery podremos encontrar interesantísimos controles y efectos visuales para la creación de modernas aplicaciones web.

jQuery UI Autocomplete

Con este artículo pretendo que veamos el código completo asociado a 2 ejemplos prácticos:

jQueryUI Autocomplete Demo

1. jQueryUI Autocomplete Ajax Básico: Este ejemplo es el uso sencillo del Autocompletar jQuery UI, con una configuración muy básica, y obteniendo los datos a partir de una llamada ASP.Net Ajax.

2. jQueryUI Autocomplete Ajax con Cache: Este otro ejemplo de Autocompletar jQuery UI lo completamos un poco más, además de la llamada Ajax, implementamos el uso de una cache para reducir las llamadas al Servidor.

 

 

jQueryUI Autocomplete ASP.Net Ajax Básico

Pero vallamos a la práctica. Lo primero que haremos será escribir el código para poner un simple input en una pagina web, y cuando escribamos, al menos 2 caracteres en el input, consultaremos un WebMethod (C#) que nos devolverá en formato JSON, la lista de las ciudades que coincidan con los caracteres tecleados.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryUIAutocomplete.aspx.cs"     Inherits="jQueryUI_jQueryUIAutocomplete" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>jQueryUI Autocomplete en ASP.Net (Simple)</title>
 
  <link href="css/redmond/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript"  
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
 
  <script type="text/javascript">
    jQuery(document).ready(function () {
      $("#txtCiudad").autocomplete({
        source: function (request, response) {
          PageMethods.ObtCiudades(request.term,
            function (data) {
              var ciudades = (typeof data) == 'string' ? eval('(' + data + ')') : data;
              response(ciudades);
            },
            fnLlamadaError);
        },
        minLength: 2
      });
    });
 
   function fnLlamadaError(excepcion) {
      alert('Ha ocurrido un error interno: ' + excepcion.get_message()); 
    }
  </script>
 
  <style type="text/css">
         body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
    input { width:200px; }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="ui-widget">
       <label for="txtCiudad" style='padding-left:20px;'>Ciudad: </label>
       <input id="txtCiudad" />
    </div>
  </form>
</body>
</html>
 
 

El resultado sería el siguiente:

jQueryUI Autocomplete ASP.NetNótese que al escribir 2 caracteres (ma) filtra los resultados mostrando todas aquellas ciudades que contienen dicha cadena.

Pero comentemos un poco el código:

1. Inicialmente hacemos las referencias respectivas al css, y a las 2 bibliotecas (jQuery.js y jquery-ui-1.8rc3.custom.min.js)

2. Lo proximo que hacemos es asociar el input txtCiudad con el widget autocomplete de jQuery UI; aquí debemos comentar algunas opciones o propiedades que definimos, pero eso lo haré más adelante.

3. Posteriormente definimos la funcion “fnLlamadaError” que será ejecutada si ocurre algun error en la llamada Ajax al servicio web.

4. Dentro del <body>, incluimos el ScriptManager, necesario para poder hacer la llamada AJAX del PageMethod, podriamos haber usado la funcion Ajax de jQuery y en ese caso no sería necesario el control ScriptManager, pero me parece más simple el uso de los PageMethods.

5. Y por último, incluimos los controles HTML necesarios, en particular el control inputtxtCiudad”.

 

Detallando las opciones del AutoComplete

$("#txtCiudad").autocomplete({ 
    source: function (request, response)
    {
      PageMethods.ObtCiudades(request.term,
          function (data)
          {
             var ciudades = (typeof data) == 'string' ? eval('(' + data + ')') : data;
             response(ciudades);
          },
          fnLlamadaError); 
    },
    minLength: 2
}); 

En este código es donde asociamos el control “txtCiudad” con el widget Autocomplete de jQuery UI. Para el cual estamos definiendo 2 propiedades:

  1. Definimos la propiedad source del autocomplete asociandole una función, dentro de dicha función lo que hacemos es una llamada Ajax a nuestro servicioPageMethods.ObtCiudades” (en este caso es un PageMethods, pero podría haber sido una llamada a un web services o un WCF). La llamada al PageMethods tiene 3 parámetros, el primero es el termino o cadena introducida en el input, el segundo parámetro es la función que ejecutaremos si todo marcha bien, y el tercer parámetro es la función que se ejecuta si algo marcha mal.
  2. El segundo parámetro minLength lo establecemos a 2, indicándole al Widget Autocompletar de jQueryUI, que debe lanzar la búsqueda después de escribir al menos 2 caracteres en el input.

PageMethods o Servicio ObtCiudades

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<AutoCompleteResult> ObtCiudades(string term)
{
  var lstCiudades = new List<Ciudad>()
      {
        new Ciudad { Iata="MAD", Nombre = "Madrid", Pais = "España"},
        new Ciudad { Iata="BCN", Nombre = "Barcelona", Pais = "España" },
        new Ciudad { Iata="AGP", Nombre = "Malaga", Pais = "España" },
        new Ciudad { Iata="LON", Nombre = "Londres", Pais = "Inglaterra" },
        new Ciudad { Iata="HAV", Nombre = "Habana", Pais = "Cuba" },
        new Ciudad { Iata="MDR", Nombre = "Madeira", Pais = "Mexico"},
        new Ciudad { Iata="MDI", Nombre = "Madinson", Pais = "Estados Unidos" },
        new Ciudad { Iata="MGS", Nombre = "Madagascar", Pais = "Madagascar" },
        new Ciudad { Iata="DLN", Nombre = "Madelaine", Pais = "Canada" },
        new Ciudad { Iata="MRA", Nombre = "Madurai", Pais = "India" }
      };
 
  term = term.ToLower();
  var ciudades = from c in lstCiudades
                 where c.Iata == term || c.Nombre.ToLower().Contains(term)
                 select new AutoCompleteResult
                        { id = c.Iata, value = c.Nombre + ", " + c.Pais };
 
  return ciudades.ToList();
}

Nota: En nuestro ejemplo hemos simulado la existencia de una lista de ciudades, en un caso real probablemente tengamos que consultar una base de datos. Además usamos en este ejemplo 2 clases que no definimos aquí  porque no es el objetivo, pero puedes fácilmente intuir su estructura.

 

jQueryUI Autocomplete Ajax con Cache

Este segundo caso (jQuery UI Autocomplete) lo complicaremos un poco más, pero solo un poco, en realidad lo nuevo sería lo siguiente:

  1. Crearemos una especie de cache. Así si ya hemos realizado una búsqueda con un termino o cadena determinada, sí intentamos realizar la misma búsqueda pues no será necesario ir nuevamente a efectuar la consulta Ajax al servidor, pues ya tendremos el resultado en nuestra cache.
  2. Además agregaremos otro control input de Autocompletar jQuery UI.
  3. Agregaremos también un control de resultados (log) donde cada ves que escojamos una ciudad, se guardará o visualizará la ciudad seleccionada.

Pero como “vista hace fe…” veamos una imagen de la página web que haremos:

jQueryUI Autocomplete ASP.Net Cache Es de suponer que los 2 input de las ciudades implementen el autocompletar de jQuery UI, y ambos controles compartirán la misma cache; pero veamos el código fuente de la página web:

 

Autocomplete jQuery UI con Cache, Código aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryUIAutocompleteCache.aspx.cs" Inherits="jQueryUI_jQueryUIAutocomplete" %>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>jQueryUI Autocomplete en ASP.Net con Cache</title>
 
  <link href="css/redmond/jquery-ui-1.8rc3.custom.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
 
       <script type="text/javascript">
         jQuery(document).ready(function () {
 
           $("#txtOrigen").autocomplete({
             source: function (request, response) {
 
               //Verificamos si el termino de búsqueda ya esta en la cache
               var ciudades = $("body").data(request.term);
               if (ciudades != undefined && ciudades != null) {
                 response(ciudades);
               }
               else {
                 PageMethods.ObtCiudades(
                                        request.term,
                                        function (data) {
                                          ciudades = (typeof data) == 'string' ?
                                                      eval('(' + data + ')') : data;
 
                                          //Guardamos en la cache el resultado.
                                          $("body").data(request.term, ciudades);
 
                                          response(ciudades);
                                        },
                                        fnLlamadaError);
               }
             },
             minLength: 2,
             select: function (event, ui) {
               //Mostramos lo seleccionado en el div resultados
               log(ui.item ? ("Origen Seleccionado: " + ui.item.value + ", IataCod: "
                   ui.item.id) : "Ninguna Selección con el termino: " + this.value);
             }
           });
 
           $("#txtDestino").autocomplete({
             source: function (request, response) {
 
               //Verificamos si el termino de búsqueda ya esta en la cache
               var ciudades = $("body").data(request.term);
               if (ciudades != undefined && ciudades != null) {
                 response(ciudades);
               }
               else {
                 PageMethods.ObtCiudades(
                                        request.term,
                                        function (data) {
                                          ciudades = (typeof data) == 'string' ?
                                                      eval('(' + data + ')') : data;
 
                                          //Guardamos en la cache el resultado.
                                          $("body").data(request.term, ciudades);
 
                                          response(ciudades);
                                        },
                                        fnLlamadaError);
               }
             },
             minLength: 2,
             select: function (event, ui) {
               //Mostramos lo seleccionado en el div resultados
               log(ui.item ? ("Destino Seleccionado: " + ui.item.value + ", IataCod: " +
                   ui.item.id) : "Ninguna Selección con el termino: " + this.value);
             }
           });
 
         });
 
         function fnLlamadaError(excepcion) {
           alert('Ha ocurrido un error interno: ' + excepcion.get_message());
         }
 
         function log(message) {
           $("<div/>").text(message).prependTo("#log");
         }
 
       </script>
 
  <style type="text/css">
         body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
    input { width:200px; }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
 
  <div>
    <div class="ui-widget">
       <label for="txtOrigen">Ciudad Origen: </label>
       <input id="txtOrigen" />
 
       <label for="txtDestino" style='padding-left:20px;'>Ciudad Destino: </label>
       <input id="txtDestino" />
    </div>
 
    <div class="ui-widget" style="margin-top:2em; font-family:Arial">
       Resultados:
       <div id="log" style="height: 200px; width: 400px; overflow: auto;" class="ui-widget-content"></div>
    </div>
  </div>
  </form>
</body>
</html>

Este código es muy similar al mostrado en el primer ejemplo (jQueryUI Autocomplete ASP.Net Ajax Básico) y también su explicación, por ende solo comentaremos las cosas nuevas que hemos agregado:

$("#txtOrigen").autocomplete({
  source: function (request, response) {
 
  //Verificamos si el termino de búsqueda ya esta en la cache
  var ciudades = $("body").data(request.term);
  if (ciudades != undefined && ciudades != null) {
    response(ciudades);
  }
  else {
    PageMethods.ObtCiudades(
                            request.term,
                            function (data) {
                              ciudades = (typeof data) == 'string' ?
                                          eval('(' + data + ')') : data;
 
                              //Guardamos en la cache el resultado.
                              $("body").data(request.term, ciudades);
 
                              response(ciudades);
                            },
                            fnLlamadaError);
  }
}, 
minLength: 2,
select: function (event, ui) { 
  //Mostramos lo seleccionado en el div resultados
  log(ui.item ? ("Origen Seleccionado: " + ui.item.value + ", IataCod: "
      ui.item.id) : "Ninguna Selección con el termino: " + this.value);
}

En este código es donde asociamos el control “txtOrigen” con el widget Autocomplete de jQuery UI. Para el cual estamos definiendo 3 propiedades:

  1. Definimos la propiedad source del autocomplete asociandole una función. En esta función lo primero que hacemos es verificar si ya tenemos en cache la búsqueda solicitada, si ya existe devolvemos el resultado de la cache, en caso contrario lo que hacemos es una llamada Ajax a nuestro servicioPageMethods.ObtCiudades” y guardar el resultado obtenido en cache.
  2. El segundo parámetro minLength lo establecemos a 2, indicándole al Widget Autocompletar de jQueryUI, que debe lanzar la búsqueda después de escribir al menos 2 caracteres en el input.
  3. El tercer parámetro select definiremos una funcion con el código que queremos se ejecute cada ves que seleccionemos una ciudad, en nuestro caso llamamos a la funcion log que pintará el resultado en un div que almacenará la historia de todas nuestras selecciones.

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

Artículos relacionados: