Download do google autocomplete - google autocomplete Orient Download

google autocomplete

Componentes de terceiros

vements

Baixar

Google AutoComplete

Estou compartilhando esse componente porque fiquei impressionado com exemplos complicados para conseguir esse trabalho simples. Então, vou tentar ser o mais simples possível durante minha explicação.

O componente do Google AutoComplete não passa de um invólucro Vue.js em torno da API oficial do Google Places. Apesar da demonstração escrita em Vue.js , o objeto de preenchimento automático pode ser retirado de qualquer estrutura JS .

Requisitos

Você terá que instalar Vue & Vuemit:

 npm install vue -- save

 npm install vuemit -- save

A biblioteca Vuemit é usada para gerenciar os eventos entre o componente do Google e seu pai.

Nota: Se você estiver usando Vue 1.* , terá que puxar da ramificação Vue-1.

Demonstração

Veja a demonstração ao vivo.

exemplo

Instalação

Para instalar este pacote, você só precisa abrir seu console e digitar npm i google-autocomplete-vue --save . Se houver algum problema durante a instalação, você poderá tentar novamente usar o param force : npm i -f google-autocomplete-vue --save

Começando

Primeiro de tudo , você deve se inscrever no Google API Console para obter sua chave da API: https://console.developers.google.com Depois que isso for feito, você precisará copiar a chave da API dada pelo Google e colá -la no seu ponto de entrada de arquivos JS. Exemplo:

Arquivo de bootstrap: bootstrap.js. Você precisará exigir a Vuemit neste arquivo para que o gerente de eventos seja definido global. Como assim: Exemplo
Arquivo de ponto de entrada: Demo.js

NOTA: As chaves importantes devem ser mantidas dentro de um arquivo .ENV, portanto, esteja ciente disso enquanto pressiona seu código para o seu controle Git.

Em segundo lugar , você precisará importar o componente no ponto de entrada do aplicativo, para que você possa chamá -lo globalmente quando necessário. Exemplo:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

Validação no lado do servidor

A validação de lugares é uma biblioteca do Laravel que o ajudará a lidar com seus endereços de usuário. Seu objetivo é garantir que os endereços enviados pelos usuários sejam válidos por meio de serviços de terceiros, como Google.

Dê uma olhada em seu repositório: Locais validação

Guia

Primeiro de tudo, você deve criar um ponto de entrada para compilar o componente e gerar seu arquivo de pacote. Um exemplo está disponível aqui.
Em segundo lugar, você terá que criar seu objeto Vue para controlar o 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 = { } ;
        }
    }
} ) ;

Veja o exemplo aqui.

Terceiro de tudo, você deve compilar esses dois arquivos com o BrowSerify , Webpack ou Laravel-Elixir-Vue-2 para torná-los legíveis para todos os navegadores. Exemplo:

 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' ) ;
} ) ;

Veja o exemplo aqui

Por fim, você pode usar o componente no seu arquivo HTML usando esta sintaxe:

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

: Config é a configuração passada para o construtor de preenchimento automático da API de lugares. Veja a documentação. Config corresponde ao argumento options no documento.

Veja o exemplo aqui.

Além disso, você pode passar em qualquer css class através do suporte de "classe".