Tips & Trucos: Como realizar un Autocomplete con JQuery UI y JsonResult de MVC


A mas de uno nos agrada la idea de tener en nuestra aplicación un TextBox que se autocomplete con la información que el usuario va escribiendo. Existen muchos plugins de JQuery que permite realizar esta funcionalidad y que a su ves le agregan un efecto adicional como por ejemplo el autocomplete de FaceBook.

En esta ocasión le mostrare como realizar su propio autocomplete con JQuery 1.4.2 y Jquery UI que nos permite hacer lo que deseamos sin plugins adicionales, y la data la vamos a obtener de un JsonResult de nuestra aplicación MVC (aunque también lo pueden hacer con un WebServices o un WebForms que maneje WebMethods).

1. Crearemos un Proyecto de tipo MVC 2 (Menú Archivo->Nuevo->Proyecto)

image

2. En nuestra carpeta Models vamos agregar una nueva clase: Esta nueva clase vamos a simular algunos datos, o si prefieren pueden enlazar la información a un Entity Framework.

Le damos botón derecho sobre la carpeta Models y seleccionaremos la opción Agregar->Nuevo elemento->Clase, y la llamaremos MPersona.cs (la M adelante es para darnos la idea de que es una clase Models)

image

3. Agregar Propiedades a la clase.

Agregaremos las propiedades básicas de una persona que son:

Nombre

Apellido

y una ultima propiedad que mostrara la informa completa de las 2 propiedades anteriores al que llamaremos NombreCompleto.

using System;using System.Collections.Generic;using System.Linq;using System.Web;

namespace MvcDemosBlog.Models{    public class MPersonas    {        public string Nombre { get; set; }        public string Apellido { get; set; }        public string NombreCompleto {             get            {                return string.Format("{0} {1}", Nombre, Apellido);            }        }    }}

4. Agregar funcionamiento a la Clase.

Ahora lo que queremos es que esto nos devuelva un colección de nombres el cual mostraremos en el textbox a medida que el usuario escriba, para debajo de las propiedades agregadas arriba vamos a crear un método que retorna una lista genérica de la clase persona. El método lo llamaremos ObtenerPersonas() y será estático y publico para solo enfocarnos en retornar la información sin tener que declarar nuevas instancias para acceder al método.

public static List<MPersonas> ObtenerPersona(){    //Agregamos valores aleatorios    //Este metodo puedes agregar tu propia logica 🙂    List<MPersonas> lista = new List<MPersonas>     {         new MPersonas{ Nombre="Alex", Apellido="Jimenez"},        new MPersonas{ Nombre="Pedrito", Apellido="Perez"},        new MPersonas{ Nombre="Jacinta", Apellido="Juarez"},        new MPersonas{ Nombre="Teodoro", Apellido="Finito"},        new MPersonas{ Nombre="Mengano", Apellido="Rojas"},        new MPersonas{ Nombre="Sutano", Apellido="White"}    };

    return lista;}

5. Crear un JsonResult.

Ahora en nuestro HomeController ubicado en la carpeta Controller vamos agregar la siguiente acción que devolverá la información en Formato Json.

/// <summary>/// Metodo que retorna en formato json el resultado de la busquedad/// </summary>/// <param name="term">Termino de busquedad</param>/// <returns>JSON</returns>public JsonResult Personas(string term){    if (string.IsNullOrWhiteSpace(term))    {        //Si viene el parametro term vacio o con espacio o null        //este devolvera todos los valores del metodo        return this.Json(Models.MPersonas.ObtenerPersona(), JsonRequestBehavior.AllowGet);    }    else    {        //si viene con valor este filtrara la información correspondiente        //a la primera letra del campo NombreCompleto        var query = from p in Models.MPersonas.ObtenerPersona()                    where p.NombreCompleto.ToUpper().StartsWith(term.ToUpper())                    select p;

        return this.Json(query, JsonRequestBehavior.AllowGet);    }}

Ya con esto podemos hacer nuestra primera prueba que es darle F5  y escribir en la barra de dirección lo siguiente: http://localhost:mipuerto/home/personas

image

6. Referencia a las Librerías de JQuery.

Abrimos la MasterPage que se encuentra dentro de la carpeta Views->Shared y en el head le colocaremos los enlaces a las librerías de JQuery 1.4.2 y al JQuery UI 1.8.4 (tanto css y js)

<head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />    </title>    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css"        rel="stylesheet" type="text/css" />

    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"         type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"

         type="text/javascript">

</script>
</head>

7. Agregar los controles al html.

Ahora vamos a la carpeta View luego a HOME y abrimos  Index.aspx para agregar un textbox (o input de tipo Text) y div.

<input id="txtAutocomplete" type="text" /><div id="log" style="overflow: auto;"></div>
8. El AutoComplete;
Ahora debajo de los controles arrojado en la pagina Index.aspx colocaremos lo siguiente:

<script type="text/javascript">    $(document).ready(function () {    //Para escribir el valor seleccionado en el DIV         function log(message) {            $("<div/>").text(message).prependTo("#log");            $("#log").attr("scrollTop", 0);        };        //Invocacion a la funcion autocomplete        $("#txtAutocomplete").autocomplete({        //Los datos, que son invocado mediante JQuery ajax            source: function (request, response) {                $.ajax({                //Ruta donde buscar los datos                    url: "/home/personas",                    //Parametros con sus valores a pasar a la url                    data: { term: $("#txtAutocomplete").val() },                    //Tipo de Dato devuelto                    dataType: "json",                    //Si todo esta ok, construye los datos a mostrar en el textbox                    success: function (data) {                        response($.map(data, function (item) {                            return {                                //Indicamos el Valor                                value: item.NombreCompleto,                                //el Label si lo desean                               // label: item.Nombre,                                //y el ID                                id: item.Nombre                            }                        }))                    }                })            },            //Minima letra permitida para mostrar la lista de resultado            minLength: 1,            //Cuando seleccione un valor muestra su resultado            select: function (event, ui) {                log("Selecciono Valor: " + ui.item.value + ", id: " + ui.item.id );            }        });    });</script>

Ya esto con esto es todo.. puedes ver la demo presionando aquí y el código fuente de aquí

Post Cruzado de AJDev.net

Anuncios

3 comentarios el “Tips & Trucos: Como realizar un Autocomplete con JQuery UI y JsonResult de MVC

  1. Pingback: BlogESfera.com

  2. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s