lunes, 11 de mayo de 2015

Ajax Autocomplete en Grails


En esta ocasión voy a mostrar un pequeño ejemplo de un campo que nos va mostrando sugerencias de valores validos de acuerdo a lo que el usuario va escribiendo, un caso típico del uso de estos campos es para introducir la ubicación.



Configurando Grails con los js de Ajax Autocomplete

Al momento de realizar este tutorial estoy utilizando la versión 2.4.4. de Grails, y utilizaremos los siguientes js: https://www.devbridge.com/sourcery/components/jquery-autocomplete/ una vez que hemos descargado los archivos js los agregamos “web-app/js/ después solo agregamos el import en la vista donde lo vayamos a utilizar por ejemplo: 

<g:javascript src="jquery.autocomplete.js"/>

Finalmente dentro de nuestro formulario agregamos un campo de texto por ejemplo:

<g:textField  class="form-control" id="location" name="localtion"/>

En la misma vista donde vayamos a utilizer la herramienta es necesario agregar el siguiente script:

<script type="text/javascript">

    $(function() {
        $("#location").autocomplete({
            paramName: 'q',
            ajaxSettings:{type: 'GET',
                async: false,
                dataType: 'json'},
            transformResult: function(response) {

                return {
                    suggestions: $.map( response.data, function(data) {
                        return { value: data.name, data: data.subtext };
                    })
                };
            },
            serviceUrl: 'https://graph.facebook.com/search?type=adcity&method=GET&format=json&suppress_http_code=1',
            onSelect: function (suggestion) {
                alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });
    });
</script>

El Api de Facebook trae algunas monerías que pueden ser accedidas por los usuarios sin la necesidad de requerir un toquen de acceso, tal es el caso de lo que Facebook conoce como “search” la cual nos permite buscar nombres de usuarios, lugares, entre otras cosas, para saber más acerca del comando search de Facebook https://developers.facebook.com/docs/graph-api/using-graph-api/v2.3.

2 comentarios:

  1. Excelente trabajo, yo adapte una librería js a grails para dicha función, es typeahead.js. Saludos.

    ResponderEliminar
  2. Hola Raul, gracias por tus comentarios, si tienes alguna liga a tu biblioteca para probarla.

    Saludos.

    ResponderEliminar