Muchas veces nos interesa tener algún campo en la página web, tipo texbox, que se valla autocompletando mientras escribimos, por ejemplo, en los nombres de las calles, las ciudades, etc., etc., etc..

Con este pequeño truco, que he intentado hacerlo lo más genérico posible, podrás conseguir ese efecto de forma muy sencilla. Como siempre si alguien lo puede mejorar que deje el comentario de cómo hacerlo.

Requerimientos

Es imprescindible tener unos conocimientos básicos de JAVA SCRIPT (AJAX), y de base de datos, aunque puedes hacerlo con listas tambien.

Paso 1

Primero tenemos que decidir que tipo de datos vamos a autocompletar, para hacer la QUERY (consulta) correspondiente en la base de datos. En este ejemplo siempre utilizaremos un campo llamado Nombre que será el que rellene y realice la búsqueda.

Si lo deseas este campo puede ser el resultado de unir varios campos de una TABLA, por ejmplo, Nombre Apellidos. 

SELECT Nombre + ' ' + Apellido1 + ' ' + Apellido2 as Nombre 
FROM Clientes 
WHERE IdEmpresa = 1 AND (Clientes.Nombre LIKE '%" + pre + "%' OR " +
                          "  Clientes.Apellido1 LIKE '%" + pre + "%' OR " +
                          "  Clientes.Apellido2 LIKE '%" + pre + "%') 
ORDER BY Nombre,  Apellido1,  Apellido2;

Como podeis observar en este ejemplo se han unido los campos para obtener el nombre y apellidos de todos los clientes de la empresa 1.

La variable pre es el texto que está escribiendo el cliente.

Paso 2

Luego debemos definir un WEBSERVICE directamente en la misma página, podeis provar a invocar a otro web service, pero yo por ahora no lo he hecho, tema pendiente.

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
    public static List GetName(string pre)
    {
        Funciones f = new Funciones();
        string querySQL = "SELECT Nombre + ' ' + Apellido1 + ' ' + Apellido2 as Nombre FROM Clientes WHERE IdEmpresa = 1 AND (Clientes.Nombre LIKE '%" + pre + "%' OR " +
                          "  Clientes.Apellido1 LIKE '%" + pre+ "%' OR " +
                          "  Clientes.Apellido2 LIKE '%" + pre+ "%') ORDER BY Nombre,  Apellido1,  Apellido2;";
        f = null;

        return ManejoDatos.GetName(querySQL);
    }

Como podeis comprobar el webservice lo único que hace es realizar la consulta a la base de datos y devolver el resultado como una lista.

Al webservice le enviaremos desde el AJAX lo que está escribiendo el usuario para poder terminar de montar la consulta y que busque a todas las personas que coincidan con el texto que se está escribiendo.

La funcion ManejoDatos.GetName(querySQL); es vuestra rutina para realizar la consulta y devolver el conjunto de datos como lista.

Paso 3

Ahora en la página ASP debebos de poner el AJAX que va a llamar al webservice.

    < script language="javascript" type="text/javascript ">
        $(function () {
            $('#<%=txtNombre.ClientID%>').autocomplete({
                minLength: 2,
                source: function (request, response) {
                    $.ajax({
                        url: "Autocompletar.aspx/GetName",
                        data: "{ 'pre':'" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d,function(item)
                            {
                                return {value : item}
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                }
            });
        });
    < /script >

Observareis que la funcion pasa el parámero pre al webservice y que está en la misma página en la que el textbox (txtNombre), el cual es el que va a ir mostrando las coincidencias de la en una lista.

Y eso es todo amigos!!!

Bueno con esto es suficiente para que disfruteis de un autocompletar en vuestras páginas web. Yo, por ahora, siemrpe he utilizado solo un campo, pero podis intentar hacer en varios campos, o modificar el javascript para que reciba el nombre del elemento sobre el que hacer el autocompletar cuando, por ejemplo, recibe el foco.

Mas información en el blog original (en inglés).

No se vallan todavía, aún hay mas!

¿De verdad creíais que con esto estaba todo escrito? Bueno pues aquí un poco de mi aportación. Yo lo he generalizado un poco, y  lo he implementado desde el codebehide.

    /// 

    /// Crear el javascript y todo lo necesario para la funcion de autompletar en el elemento seleccionado.
    /// 

    /// enviar el TextBox.ClientID del elemento seleccionado
    /// Nombre de la pagina que contendra la llamada al webservice de la propia
    /// Indica si hay mas de uno, por lo que solo se crear el estilo y la llamada a jquery una vez
    public string autoCompletar(string textboxName, string pageName, bool muchos = false )
    {
        string codigo = "";

        try
        {
            if (muchos == false)
            {
                // primero el estilo
                codigo = "< style type=\"text/css\">" +
                         "  .ui-widget {font-family: Verdana,Arial,sans-serif; font-size: 1.1em;}" +
                         "  .ui-widget-content {border: 1px solid # aaaaaa; background: # ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: # 222222;}" +
                         "  .ui-corner-all {border-bottom-right-radius: 4px;}" +
                         "  .ui-front {z-index: 100;}" +
                         "  .ui-autocomplete {position: absolute;top: 0;left: 0;cursor: default;font-size: 11px;text-align: left;}" +
                         "  .ui-menu {list-style: none;padding: 2px;margin: 0;display: block;outline: none;}" +
                         "      .ui-menu .ui-menu-item {margin: 0;padding: 0;width: 100%;}" +
                         "< /style >";
                // ahora los requerimientos de jquery. Esta linea se puede quitar si ya utilizan un Jquery igual o superior
                codigo += "< script src=\"http://code.jquery.com/jquery-1.9.1.js \">< /script >";
            }
            // por ultimo el codigo javascript para ejecutar el autocompletar
            codigo += "< script lang=\"javascript\" type=\"text/javascript\" >" +
                      " $(function () {" +
                      "     $('#" + textboxName + "').autocomplete({" +
                      "         minLength: 3," +
                      "         source: function (request, response) {" +
                      "             $.ajax({" +
                      "                 url: \"" + pageName + "/GetName\"," +
                      "                 data: \"{ 'pre':'\" + request.term + \"' }\"," +
                      "                 dataType: \"json\"," +
                      "                 type: \"POST\"," +
                      "                 contentType: \"application/json; charset=utf-8\"," +
                      "                 success: function (data) {" +
                      "                     response($.map(data.d, function (item) {" +
                      "                         return { value: item }" +
                      "                     }))" +
                      "                 }," +
                      "                 error: function (XMLHttpRequest, textStatus, errorThrown) {" +
                      "                     alert(textStatus);" +
                      "                 }"+
                      "             });" + 
                      "         }" +
                      "     });" +
                      " });" +
                      "< /script >";

            return codigo;
        }
        catch 
        {            
            return "";
        }
    }

Con esta función le paso el nombre del textobox y de la página en la que queremos hacer el efecto y que contiene el webservice con la QUERY a la base de datos.

Cómo utilizarlo

Para utilizar este código, en la página ASP hay que poner un objeto literal en el HEAD. Por si no lo sabeis, el objeto literal se pude utilizar FUERA DEL FORM en las páginas ASP.

< asp:Literal ID="litAutocompletar" runat="server" >

Luego en el evento LOAD de la página llamar a la función autocomletar y pasarle los datos que necesitamos, que es el ClienteID del objeto textBox y el nomobre de la página COMPLETO.

        // autocompletar
        crearJavas j = new crearJavas();
        litAutocompletar.Text = j.autoCompletar(txtFiltro.ClientID, "UserAll.aspx");
        j = null;

Como veis yo me lo he creado en una clase llamada crearJavas y ahí tengo muchas cosillas, que poco a poco, iré poniendo en mis blogs.

Conclusiones

El saber es de todos, espero que utiliceis y compartais este blog con todo@s los que querais. Muchas gracias por leer y compartir mi blog.

#trucos, #ASP, #AJAX, #CSHARP

Revisisado el 12 de Julio 2016