Autocomplete con Jquery

Hola a todos, el dia de hoy quiero mostrarles como gracias a JQuery podemos hacer un autocompletar en u textbox de una manera rápida y sencilla, y así poder ofrecer al usuario una mejor experiencia y nuestro webform será un poco más profesional.

En el ejemplo se hara una búsqueda de nombres en una lista genérica, la cual contiene unos nombres preestablecidos, la idea aquí sería llenar la lista con datos desde una base de datos, en esta caso lo único que cambiaría sería el llenado de la lista, lo demás será pracricamente igual, pero veamos como quedaría nuestro campo de texto cuando se encuentran coincidencias...



Ahora q vimos como se verá la función de autocomplete pues manos a la obra..

Lo primero será diseñar la interfaz de usuario, en este caso solo necesitamos un label y un textbox, luego referenciamos los scripts de jquery y jquery ui a nuestra página, es decir:


<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>


Para nuestro ejemplo, como tenemos q hacer todo en codebehind, porque las conicidencias se deberián cargar de una base de datos (en el ejemplo usaremos una lista), entonces agregamos un scriptmanager a la página, y le establecemos la propiedad EnablePageMethods en true para poder acceder a la función que retorna las conicidencias ya que debemos comunicar el cliente con el servidor una forma de hacerlo es usando un WebMethod. Es decir, el control scriptmanager quedaria:


<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>


Ahora, en nuestro codebehind vamos a declarar una función la cual hará la consulta a la lista de nombres y retornará solo aquellos q sean coincidentes con lo que el usuario va escribiendo en el textbox. Lo importante a tener en cuenta es que el método debe ser declarado como public shared y debe tener el atributo WebMethod(). Es decir, la función quedaria:


<WebMethod()> _

    Public Shared Function ObtieneNombres(ByVal sNombre As String) As Object

        Dim oListNombres As List(Of String) = New List(Of String)()

        oListNombres.Add("Julio Avellaneda")

        oListNombres.Add("Javier Alfredo")

        oListNombres.Add("Juan Manuel")

        oListNombres.Add("Jesus Alfredo")

        oListNombres.Add("Jose Manuel")

        oListNombres.Add("Luis Carlos")

        oListNombres.Add("Julieta")



        sNombre = sNombre.ToLower()

        If Not oListNombres Is Nothing Then

            Dim oNombres As Object

            oNombres = From nombre In oListNombres _

                        Where nombre = sNombre OrElse nombre.ToLower.StartsWith(sNombre) _

                        Select nombre



            Return oNombres

        Else

            Return Nothing

        End If

    End Function


Vamos a explicar la función:La funciñon recibe un parámetro de tipo String, este parámetro es lo que el usuario va tecleando en el textbox, ahora se crea una lista genérica de tipo string para almacenar los nombres de los usuarios, luego simplemente llenamos la lista (aquí sería el lugar en donde se llena la lista desde la base de datos), luego verificamos que la lista no este vacía para poder hacer la comparación y así mostrar los datos coincidentes.
Ahora, se declara una variable de tipo object, y a esa variable le asignamos el resultado de una consulta con linq hecha sobre la lista para poder consultar los items relacionados, la consulta de linq lo que hace es en la primera linea es especificar en donde vamos a realizar la búsqueda (en este caso en la lista creada), en la segunda línea especificamos las condiciones de búsqueda, en este caso donde almacenado en la lista sea igual a lo tecleado por el usuario o los items que comienzen por lo tecleado por el usuario, en la tercera línea le especificamos lo que deseamos mostrar, finalmente retornamos las coincidencias.

Ahora que vimos la lógica para traer las coincidencias, vamos a revisar como debemos trabajar en el cliente con jquery, nuestro script de jquery sería:


<script type="text/javascript">

         jQuery(document).ready(function () {

             $("#<%= TextBoxNombre.ClientID  %>").autocomplete({

                delay: 0,

                source: function (request, response) {

                    PageMethods.ObtieneNombres(request.term,

                            function (data) {

                                var nombres = (typeof data) == 'string' ? eval('(' + data + ')') : data;

                                response(nombres);

                            },

                            fnLlamadaError);

                },

                minLength: 1

            });

        });



        function fnLlamadaError(excepcion) {

            alert('Ha ocurrido un error al traer los nombres: ' + excepcion.get_message());

        }


Pero como funciona este código:
Lo primero es relacionar el plugin de autocomplete jquery con el textbox, luego comenzamos a definir las propiedades del plugin, delay hace referencia al tiempo en que tarde en aparecer las coincidencias, minLength especifica el número de caracteres minimos para poder comenzar a usar el autocomplete, source hace referencia a la fuente de valores en la cual se va a hacer la comparación, en nuestro caso hacemos un llamado al webmethod creado, para llamarlo usamos PageMethods., por último especificamos una función para informar al usuario mediante un mensaje sise produjo algún error al llamar a la función.

Bueno y eso es todo lo que debemos hacer para poder usar un autocomplete de jquery, en el ejemplo encuentran la hoja de estilo y los scripts de jquery... hasta un próximo post que espero no se tarde más de dos semanas !!

Descarga del ejemplo !!