google autocomplete Download - google autocomplete Quellcode herunterladen

google autocomplete

Komponenten von Drittanbietern

vements

Herunterladen

Google AutoComplete

Ich teile diese Komponente, weil ich von komplizierten Beispielen überfordert war, um diesen einfachen Job zu erreichen. Ich werde also versuchen, während meiner Erklärung so einfach wie möglich zu sein.

Google AutoComplete -Komponente ist nicht mehr als eine Vue.js -Wrapper um die offizielle API von Google Places. Trotz der in Vue.js geschriebenen Demo kann das automatische Objekt aus jedem JS -Framework abgezogen werden.

Anforderungen

Sie müssen Vue & Vuemit installieren:

 npm install vue -- save

 npm install vuemit -- save

Die Vuemit -Bibliothek wird verwendet, um die Ereignisse zwischen der Google -Komponente und ihrer übergeordneten zu verwalten.

Hinweis: Wenn Sie Vue 1.* verwenden, müssen Sie aus dem Vue-1-Zweig ziehen.

Demo

Live -Demo anzeigen.

Beispiel

Installation

Um dieses Paket zu installieren, müssen Sie nur Ihre Konsole öffnen und npm i google-autocomplete-vue --save eingeben. Wenn es während der Installation Probleme gibt, können Sie erneut versuchen, den force zu verwenden: npm i -f google-autocomplete-vue --save

Erste Schritte

Zunächst müssen Sie sich bei der Google API -Konsole anmelden, um Ihren API -Schlüssel zu erhalten: https://console.developers.google.com, sobald dies erledigt ist, müssen Sie den von Google angegebenen API -Schlüssel kopieren und in Ihren JS -Dateieinstiegspunkt einfügen. Beispiel:

Bootstrap -Datei: Bootstrap.js. Sie müssen in dieser Datei ein Vuemit benötigen , damit die Ereignishandler die Globale festlegen. AS SO: Beispiel
Einstiegspunktdatei: Demo.js

HINWEIS: Wichtige Schlüssel müssen in einer .EnV -Datei aufbewahrt werden. Beachten Sie dies daher, während Sie Ihren Code auf Ihre Git -Steuerung drücken.

Zweitens müssen Sie die Komponente in Ihrem Antragseinstiegspunkt importieren, damit Sie sie bei Bedarf global aufrufen können. Beispiel:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

Validierung auf der Serverseite

Die Plätzevalidierung ist eine Laravel -Bibliothek , die Ihnen hilft, Ihre Benutzeradressen zu behandeln. Sein Ziel ist es, sicherzustellen, dass Adressen, die von Benutzern eingereicht wurden, als Google über Drittanbieterdienste gültig sind.

Schauen Sie sich das Repository an: Platzieren Sie die Validierung

Führung

Zunächst müssen Sie einen Einstiegspunkt erstellen, um die Komponente zu kompilieren und Ihre Bundle -Datei zu generieren. Ein Beispiel ist hier verfügbar.
Zweitens müssen Sie Ihr Vue -Objekt erstellen, um die Komponente zu steuern:

 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 = { } ;
        }
    }
} ) ;

Siehe das Beispiel hier.

Drittens müssen Sie diese beiden Dateien mit Browserify , Webpack oder Laravel-Elixir-vue-2 kompilieren, um sie für jeden Browser lesbar zu machen. Beispiel:

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

Siehe das Beispiel hier

Schließlich können Sie die Komponente in Ihrer HTML -Datei mit dieser Syntax verwenden:

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

: config ist die Konfiguration, die an den AutoComplete Constructor der Plätze -API übergeben wird. Siehe Dokumentation. Die Konfiguration entspricht dem Argument options im DOC.

Siehe das Beispiel hier.

Außerdem können Sie jede css class über die "Klasse" -Peque übergeben.