AutoComplete MVC 5 (usando librería select2)

En este articulo veremos la manera de como crear un dropdowlist con autocomplete en mvc 5 usando la libreria select2 ya que buscando en la web me doy cuenta que existen pocos ejemplos usando esta librería en un proyecto mvc de asp.net.

Para este ejemplo usare una base de datos que solo cuenta con una tabla Departamento(son los departamentos de mi bello país El Salvador)

Creamos un proyecto en VS y lo primero que aremos es agregar la librería select2 a nuestro proyecto(la descargamos con nuget)

Creamos el modelo de nuestra base de datos

Creamos un controlador(DepartamentoController) y agregamos el siguiente código

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetDepartamento(string departamento)
        {
            PaisEntities bd = new PaisEntities();
            //cargo datos sin filtro
            var dataList = bd.Departamento.ToList();
            //si parametro tiene dato
            if(departamento != null)
            {
                //busco dato filtrado
                 dataList = bd.Departamento.Where(x => x.Departamento1.Contains(departamento)).ToList();
            }

            //datos a usar
            var modificarData = dataList.Select(x => new
            {
                id= x.Id,
                text=x.Departamento1
            });
            //retorno datos como json
            return Json(modificarData, JsonRequestBehavior.AllowGet);
        }

        //Metodo donde obtengo dato
        [HttpPost]
        public ActionResult Save(string id)
        {
            //aca tu codigo
            return Json(0, JsonRequestBehavior.AllowGet);
        }

Como ven tenemos un método GetDepartamento que recibirá un parámetro y que nos retornara un json. Les explico un poco que es lo que hace este método primeramente cargamos la lista con todos los departamentos(los datos que se mostraran por defecto cuando el usuario no escriba nada) luego si el parámetro contiene datos hacemos el filtro para buscar los datos que coincidan con lo que el usuario escriba para eso usamos linq lo hacemos con el método Contains(es similar a hacer un like de sql), para este ejemplo mostraremos los departamento y obtendremos el id del departamento seleccionado, por ultimo tenemos el método Save que sera donde obtendremos el valor del id seleccionado.

Ahora creemos nuestra vista Index y agregamos el siguiente código

@model PruebaAutocomplete.Models.Departamento
@{
    ViewBag.Title = "Index";

}

@*tema de boostrap para select2*@




@using (Html.BeginForm("ConsultarCreditos", "Cliente", FormMethod.Post))
{
    <select class="mySelect2" style="width:200px"></select>
    <br />
    <br />
    <div class="form-group">
        @Html.TextBoxFor(m => m.Id, null, new { disabled = true })

    </div>

}



<script>
    //obtengo datos por ajax
    $(document).ready(function () {
        $(".mySelect2").select2({
            placeholder: "Seleccione Departamento",
            allowClear: true,
            theme: "bootstrap",
            ajax: {
                //invoco el metodo de mi controlador
                url: '@Url.Action("GetDepartamento","Departamento")',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        departamento: params.term //parametro del metodo de mi controlador
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            }
        });
    });

    //capturar dato seleccionado
    $(".mySelect2").on("change", function () {
        var departamentoID = $(this).val(); //capturo id seleccionado
        var textboxData = departamentoID; 
        $.ajax({
            url: '@Url.Action("Save","Departamento")', //url metodo de mi controlador
            data: { id: textboxData },
            dataType: 'json',
            type: 'post',
            success: function () {
                $("#Id").val(textboxData);//asigno valor id a textbox
            }
        });

    });
</script>

Lo que hacemos es crear un dropdowlist donde mostraremos los departamentos y también tenemos un texbox que es donde mostraremos el id del departamento seleccionado. 

Lo importante acá es ver como implementamos jquery con ajax para cargar los departamentos y como obtenemos el valor del id.

En la primera parte obtenemos los datos invocando por ajax el método GetDepartamento de nuestro controlador en esta parte también usamos algunas propiedades de la librería select2 para asignarle el tema y placeholder. En la segunda parte capturamos el id del dato seleccionado y enviamos por ajax este valor a nuestro método Save de nuestro controlador, también acá asignamos el valor del id seleccionado a nuestro textbox.

Bueno eso seria todo. Pueden descargar el proyecto desde mi repositorio en github  Descargar Proyecto
  
Recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios

O si quieren donarme para una soda lo pueden hacer aqui.