Skip to content
marzo 30, 2011 / martinbeltran

AutoComplete dinámico MVC 3.0 y jQuery

En muchas ocasiones disponemos de formularios con campos de entrada cuyos valores corresponden con una tabla maestra, pongamos un ejemplo un campo ‘Persona Responsable’ cuyos valores son los disponibles en una tabla ‘empleados’ de nuestro sistema de información. En estos casos podemos ofrecer al usuario una pantalla de busqueda enlazada con el campo, con campos de busqueda como nombre, apellido 1, apellido 2, etc… o bien, un campo autocomplete donde al empezar a escribir se mostrará una lista denombre coincidentes.

En este post vamos a ver como implementar éste tipo de campos utilizando jQuery y su extensión de funcionalidades de Interface de Usuario (UI), pero haciendo que el control busque en nuestra base de datos, para dinamizar los resultados.

Requisitos Previos:

  1. Librería jQuery
  2. Librería UI jQuery con el autocomplete
  3. Hoja de estilos jQuery

Hacerlo funcionar:

Vamos a establecer dos integrantes de nuestro ejemplo, por un lado el formulario y por otro la fuente de información,veamos:

  1. Fuente de Información

    En esta parte solo tendremos que definir un metodo en un controlador, en nuestro ejemplo PersonasController, que nos devuelva los registros coincidentes con la busqueda formateados con JSON.

    No mostramos el codigo de FindbyNombre porque no es interesante, utilizar de vuestro modelo los metodos de busqueda que considereis para devolver estos datos.

public
ActionResult Find(string term)

{

term = ‘%’ + term + ‘%’;


return Json(Personas.FindbyNombre(term), “personas”, JsonRequestBehavior.AllowGet);

}
  1. Formulario

    Aquí está toda la potencia del caso, el objeto automplete de jquery permite asociarle la función a una caja de texto de nuestro formulario para desplegar toda la funcionalidad, podeis ver toda la documentación de éste objeto aquí, en éste ejemplo voy a resumir a lo que necesitamos exclusivamente que son

  • Propiedad Source: aquí defines el origen de datos que quieres usar, puede ser un array estático, un array que devuelva una función… y lo que nos ocupa hoy… puede ser una llamada ajax a un web service, un controlador…etc..
  • Metodo Select(): Salta cuando pulsas enter sobre un registro o pinchas con el ratón sobre él.

 

Visto esto solo tenemos que incorporar las siguientes lineas de código en nuestro formulario:

$(“#txtNombrePersona“).autocomplete({

source: function (request, response) {

$.ajax({

url: ‘@Url.Action(“Find”, “Personas”)‘,

dataType: “json”,

data: {

term: request.term

},

success: function (data) {

response($.map(data, function (item) {

return {

label: item.nombre + ” ” + item.apellido1 + ” ” + item.apellido2,

codigo: item.codigopersona

}

}));

},

error: function (msg) {

alert(‘error’ + msg.toString());

}

});

},

minLength: 2,

select: function (event, ui) {

//Aqui recogemos el objeto ui que tiene la información del elemento selecciónado

// podemos acceder a la información por ui.nombre, ui.codigopersona…. y hacer lo que queramos!!

},

open: function () {

$(this).removeClass(“ui-corner-all”).addClass(“ui-corner-top”);

},

close: function () {

$(this).removeClass(“ui-corner-top”).addClass(“ui-corner-all”);

}

});

 

 

Espero que os sea de utilidad, para mi me abre un mundo de posibilidades de mejora de interface.

 

 

 

 

 

 

 

 

 

 

 

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

A %d blogueros les gusta esto: