Autocomplete con Jquery

Posted on Actualizado enn


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 !!

9 comentarios sobre “Autocomplete con Jquery

    Laura Arevalo escribió:
    02/11/2011 en 16:25

    tu blog esta lleno de muy buenos ejemplos…gracias

    […] en algunos post pasados realiza un ejemplo sobre como implementar un autocompletar con jquery y vb (mira el post aca), en este corto post os dejo el mismo ejemplo pero esta vez realizado en […]

    CESAR W GRIMALDOS escribió:
    03/30/2011 en 09:02

    Hola, mi nombre es Cesar y estoy tratando de implementar algo parecido en mi proyecto de clase en C# una aplicacion windows form, te agradeceria me dieras la pauta de como hacerlo y mi caso es asi
    1- cree dos tablas (nombres y apellidos) con los campos Id (int), nombre/apellido (varchar), idGenero (int (este campo solo para tener en cuenta con los nombres (si es masculino o femenino), observacion, Idusuario (int) y fechacreacion(datetime)

    2 en el form clientes capturare nombre1, nombre2, apellido1 y apellido2

    la idea es que cuando este haciendo esta captura me haga el autorrelleno mostrandome la lista de nombres para los campos nombre (nombre2 puede ser nulo en algunos casos) y los apellidos para los campos apellidos

    ademas que me valide el campo nombre1 para determinar el genero (Masculino/Femenino) tengo una tabla llamada Genero (IdGenero, nombre, observacion….)

    las tablas que entrarian a jugar en este caso seran, clientes, nombres, apellidos, genero

    le agradezco de antemano la ayuda para este proyecto lo mas pronto posible

    atte

    CESAR W GRIMALDOS

      Julio Avellaneda respondido:
      03/30/2011 en 14:15

      hola, bueno en el ejemplo uso jquery q solo aplica para app web, en tu caso q es una app windows podrias manejar en evento keypress o textchanged dekl mismo… lo otro ya es q definas la consulta necesaria en tu sql, para unir las tablas tendrias q usar joins, luego esa consulta la mandas a un datatable y alli luego manipulas dichos campos y vas asignando a tus campos de texto…bueno si te puedo ayudar en algo mas cuentame

    Harold escribió:
    09/05/2012 en 15:48

    Buenas Tardes, mi escenario es el siguiente tengo un tabla con codigo y descripcion, y requiero hacer la busqueda por descripcion con autocompletar, como hago para que cuando, se seleccione una de las opciones sugeridas me tome el codigo y lo coloque en otro textbox. Gracias

    maicol escribió:
    05/01/2013 en 17:41

    Hola julio excelente post pero.. una pregunta mas como lo puedo emplear cuando el textbox esta dentro del una gridview osea asi :

    supongamos tengo varios textbox dentro del grid como hago para que todos tengan este autocomplete , ya ademas al mismo tiempo me valide NP,00,01….
    Osea que solo se puede ingresar np,00,01

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