Descarga de google autocomplete - Descargar el código fuente de google autocomplete

google autocomplete

Componentes de terceros

vements

Descargar

Google Autocompletar

Estoy compartiendo este componente porque estaba abrumado por ejemplos complicados para lograr este trabajo simple. Entonces, intentaré ser lo más simple posible durante mi explicación.

El componente de Google AutoComplete no es más que un envoltorio Vue.js alrededor de la API oficial de Google Places. A pesar de la demostración escrita en Vue.js , el objeto autocompletado se puede extraer de cualquier marco JS .

Requisitos

Tendrá que instalar Vue y Vuemit:

 npm install vue -- save

 npm install vuemit -- save

La biblioteca Vuemit se utiliza para administrar los eventos entre el componente de Google y su padre.

Nota: Si está usando Vue 1.* , tendrá que sacar de la rama Vue-1.

Manifestación

Ver demostración en vivo.

ejemplo

Instalación

Para instalar este paquete, solo necesita abrir su consola y escribir npm i google-autocomplete-vue --save . Si hay algún problema durante la instalación, puede intentarlo nuevamente utilizando el force Param: npm i -f google-autocomplete-vue --save

Empezando

En primer lugar , debe registrarse en la consola de la API de Google para obtener su clave API: https://console.developers.google.com Una vez que se haya realizado, tendrá que copiar la clave API dada por Google y pegarla en su punto de entrada del archivo JS. Ejemplo:

Archivo Bootstrap: bootstrap.js. Tendrá que exigir a Vuemit en este archivo para que el controlador de eventos establezca globalia. Como así: ejemplo
Archivo del punto de entrada: Demo.js

Nota: Las claves importantes deben mantenerse dentro de un archivo .env, así que tenga en cuenta esto mientras presiona su código a su control GIT.

En segundo lugar , tendrá que importar el componente en el punto de entrada de su aplicación, para que pueda llamarlo a nivel mundial cuando sea necesario. Ejemplo:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

Validación en el lado del servidor

La validación de lugares es una biblioteca de Laravel que lo ayudará a manejar sus direcciones de usuario. Su objetivo es asegurarse de que las direcciones presentadas por los usuarios sean válidas a través de servicios de terceros, como Google.

Eche un vistazo a su repositorio: Validación de lugares

Guía

En primer lugar, debe crear un punto de entrada para compilar el componente y generar su archivo de paquete. Un ejemplo está disponible aquí.
En segundo lugar, deberá crear su objeto VUE para controlar el componente:

 require ( './bootstrap' ) ;


new Vue ( {

    el : '#demo' ,


    data :
    {
        output : { } , address : { } , sent : false , response : { } , config : { }
    } ,


    mounted ( )
    {
        //Set an event listener for 'setAddress'.
        Vuemit . listen ( 'setAddress' , this . onAddressChanged ) ;
        Vuemit . listen ( 'addressWasCleared' , this . onAddressCleared ) ;
    } ,


    methods :
    {
        /**
         * Submit the data to be evaluated.
         *
         * @return {Void}
         */
        submit ( )
        {
            this . sent = true ;
            this . output = this . address ;
            this . address = { } ;
        } ,


        /**
         * Checks whether the output data is valid.
         *
         * @return {Bool}
         */
        isValid ( )
        {
            return Object . keys ( this . output ) . length > 0 ;
        } ,


        /**
         * Checks whether the output data is not valid.
         *
         * @return {Bool}
         */
        isNotValid ( )
        {
            return ! this . isValid ( ) ;
        } ,


        /**
         * The callback fired when the autocomplete address change event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressChanged ( payload )
        {
            if ( Object . keys ( paypload . place ) . length > 0 ) {
                this . address = payload . address ;
                this . response = payload . response ;
            }
        }

        /**
         * The callback fired when the autocomplete clear event is fired.
         *
         * @param {Object}
         * @return {Void}
         */
        onAddressCleared ( )
        {
            this . address = { } ;
            this . response = { } ;
        }
    }
} ) ;

Vea el ejemplo aquí.

En tercer lugar, debe compilar estos dos archivos con Browserify , Webpack o Laravel-Elixir-Vue-2 para que sean legibles para cada navegador. Ejemplo:

 require ( 'laravel-elixir-vue-2' ) ;
var elixir = require ( 'laravel-elixir' ) ;

elixir . config . sourcemaps = false ;
elixir . config . assetsPath = 'src' ;

elixir ( function ( mix )
{
    mix . webpack ( 'demo.js' , 'dist/demo.js' ) ;
} ) ;

Vea el ejemplo aquí

Finalmente, puede usar el componente en su archivo HTML usando esta sintaxis:

 < google-autocomplete
    class = " input "
    input_id = " txtAutocomplete "
    :config = " {type: ['geocode']} "
    placeholder = " type your address "
>
</ google-autocomplete >

: config es la configuración pasada al constructor de autocompletar de la API de lugares. Ver la documentación. La configuración corresponde al argumento options en el documento.

Vea el ejemplo aquí.

Además, puede pasar cualquier css class a través del accesorio "Clase".