[ASP.NET MVC3] Crear un Autocomplete TextBox

Aunque normalmente trabajo con el hermano mayor (ASP.NET) he de reconocer que ASP:NET MVC me gusta mucho y de vez en cuando trasteo un poquillo y como resultado ha salido este artículo.

Lo primero es crear una aplicación ASP.NET MVC 3

image

Seleccionamos que queremos una “Internet Application” y el motor de vistas “Razor”

image

Lo primero que vamos a hacer, es descargar una librería JQuery que se llama Autocomplete. Una vez descargado, la descomprimimos y tenemos algo como esto:

image

El archivo de estilos css jquery.autocomplete.css lo ponemos en la carpeta Content

image

Y los 2 archivos js restantes en la carpeta

image

Vamos a abrir la Master Page de nuestro proyecto y vamos a añdir la referencia a JQuery Autocomplete. En la carpeta Views/Shared está nuestra Master Page _Layout.cshtml

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript" />
    <script src="@Url.Content("~/Scripts/jquery.autocomplete.min.js")" type="text/javascript" />
</head>

Recuerda usar siempre el *.min.js para producción Winking smile

Ya tenemos nuestra librería JQuery lista para usar. Ahora vamos a añadir un controlador al que vamos a llamar CustomersController –> Botón derecho sobre la carpeta Controllers

image

image

Vamos al código de nuestro controlador y sobre la Acción Index –> botón derecho Añadir Vista tal cual se muestra en la siguiente imagen:

image

Nos vamos al código de la vista que está en la carpeta Views/Customers y se llama Index.cshtml e insertamos este código

@{
    ViewBag.Title = "Customer";
}
 
<h2>Customers</h2>
 
<p>
    <input type="text" id="customers" />
</p>

Lo único que he hecho es añadir un textbox a la vista que será el que se autocompletará cuando escribamos en el.

Ahora nos vamos a añadir un fichero js para añadir nuestro código. Yo lo he llamado custom.js con un contenido como este:

/// <reference path="jquery-1.4.4.min.js" />
/// <reference path="jquery.autocomplete.min.js" />
 
$(document).ready(function(){
    $("#customers").autocomplete("/Customers/Search", { minChars: 1 });
});

Lo primero que te puede llamar la atención son las 2 líneas <reference path… Lo que he hecho es arrastar y soltar un fichero js sobre mi fichero custom.js de esa manera ya tenemos intellisense en nuestro archivo js, mola! verdad?

En la segunda línea, haciendo uso del selector de JQuery, selecionamos nuestro input customers y con la función autocomplete cada vez que escribamamos en el textbox como mínimo (parámetro minChars) un carácter se llamará al controlador Customers a su acción Search con los siguientes parámetros:

  • q –> Que corresponderá al texto que introduzcamos
  • limit –> número máximo de registros que devolverá

Todo esto lo podemos ver en la documentación del plugin

Ahora nos falta añadir esa acción a nuestro controlador y un poco de lógica falsa para que funcione. Lo primero que voy a hacer es crearme un repositorio falso de clientes:

public class FakeRepository
{
    private List<Customer> _customers;
 
    /// <summary>
    /// Initializes a new instance of the <see cref="FakeRepository"/> class.
    /// </summary>
    public FakeRepository()
    {
        _customers = new List<Customer>
        {
            new Customer{ Name = "Luis", Company = "Spenta" },
            new Customer{ Name = "Alfredo", Company = "Spenta" },
            new Customer{ Name = "David", Company = "Spenta" },
            new Customer{ Name = "Luis 2", Company = "Spenta" },
            new Customer{ Name = "Alfredo 2", Company = "Spenta" },
            new Customer{ Name = "David 2", Company = "Spenta" }
        };
    }
 
    /// <summary>
    /// Finds the customers.
    /// </summary>
    /// <param name="criteria">The criteria.</param>
    /// <param name="limit">The limit.</param>
    /// <returns></returns>
    public IEnumerable<string> FindCustomers(string criteria, int limit)
    {
        return _customers.
            Where(c => c.Name.ToLower().StartsWith(criteria.ToLower())).
            Take(limit).
            Select(c => c.Name);
    }
}

Y añadir la acción a nuestro controlador teniendo en cuenta el nombre de los parámetros que recibe y que comentamos más arriba:

public string Search(string q, int limit)
{
    var result = _fakeRepository.FindCustomers(q, limit);
 
    return String.Join(Environment.NewLine, result);
}

Te puede llamar la atención la línea del return verdad? Es porque si miramos la documentación del plugin nos dice claramente:

The result must return with one value on each line. The result is presented in the order the backend sends it.

Es decir un valor en cada línea :)

Ahora solo falta probar la aplicación:

Un saludo

Published 4/4/2011 13:20 por Luis Ruiz Pavón
Archivado en: ,
Comparte este post:
http://geeks.ms/blogs/lruiz/archive/2011/04/04/asp-net-mvc3-crear-un-autocomplete-textbox.aspx

Comentarios

# re: [ASP.NET MVC3] Crear un Autocomplete TextBox

Solo para completar tu artículo, debo comentar que el plugin funciona tanto para MVC como WebForms. Creo que debes de quitar el texto [ASP.NET MVC3] del título de tu artículo.

También debo añadir que el plugin no parece funcionar bien en Google Chrome.

Monday, April 4, 2011 5:31 PM por Juan

# re: [ASP.NET MVC3] Crear un Autocomplete TextBox

Hola Juan,

A mí me funciona en todos los navegadores que he probado, IE, FireFox y Chrome

Un saludo

Tuesday, April 5, 2011 9:06 AM por Luis Ruiz Pavón

# re: [ASP.NET MVC3] Crear un Autocomplete TextBox

Muy bien, gracias.

Thursday, April 7, 2011 3:08 PM por Icaro

# re: [ASP.NET MVC3] Crear un Autocomplete TextBox

De nada Icaro ;)

Un saludo

Thursday, April 7, 2011 3:12 PM por Luis Ruiz Pavón