Téléchargement google autocomplete - Téléchargement du code source de la saisie google autocomplete

google autocomplete

Composants tiers

vements

Télécharger

Assomple automatique Google

Je partage ce composant parce que j'ai été submergé par des exemples compliqués pour réaliser ce travail simple. Donc, je vais essayer d'être aussi simple que possible lors de mon explication.

Google Assomplet Compleant n'est plus qu'un wrapper Vue.js autour de l'API officielle Google Places. Malgré la démo écrite dans Vue.js , l'objet assossé automatique peut être tiré de n'importe quel cadre JS .

Exigences

Vous devrez installer Vue & Vuemit:

 npm install vue -- save

 npm install vuemit -- save

La bibliothèque VueMit est utilisée pour gérer les événements entre le composant Google et son parent.

Remarque: Si vous utilisez Vue 1.* , vous devrez tirer de la branche Vue-1.

Démo

Voir la démo en direct.

exemple

Installation

Pour installer ce package, vous avez juste besoin d'ouvrir votre console et de taper npm i google-autocomplete-vue --save . S'il y a des problèmes lors de l'installation, vous pouvez réessayer à l'aide de la force Param: npm i -f google-autocomplete-vue --save

Commencer

Tout d'abord , vous devez vous inscrire sur Google API Console pour obtenir votre clé API: https://console.developers.google.com Une fois cela fait, vous devrez copier la clé de l'API donnée par Google et le coller dans votre point d'entrée de fichier JS. Exemple:

Fichier bootstrap: bootstrap.js. Vous devrez exiger VueMit dans ce fichier pour que le gestionnaire d'événements soit global. Comme c'est le cas: exemple
Fichier du point d'entrée: Demo.js

Remarque: les clés importantes doivent être conservées dans un fichier .env, alors soyez conscient de cela tout en poussant votre code à votre contrôle GIT.

Deuxièmement , vous devrez importer le composant dans votre point d'entrée d'application, vous pouvez donc l'appeler globalement en cas de besoin. Exemple:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

Validation côté serveur

La validation des lieux est une bibliothèque Laravel qui vous aidera à gérer vos adresses utilisateur. Son objectif est de s'assurer que les adresses soumises par les utilisateurs sont valides via des services tiers, en tant que Google.

Jetez un œil à son référentiel: la validation des lieux

Guide

Tout d'abord, vous devez créer un point d'entrée pour compiler le composant et générer votre fichier de bundle. Un exemple est disponible ici.
Deuxièmement, vous devrez créer votre objet Vue pour contrôler le composant:

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

Voir l'exemple ici.

Troisièmement, vous devez compiler ces deux fichiers avec Browserify , WebPack ou Laravel-Elixir-Vue-2 pour les rendre lisibles pour chaque navigateur. Exemple:

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

Voir l'exemple ici

Enfin, vous pouvez utiliser le composant dans votre fichier HTML à l'aide de cette syntaxe:

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

: la configuration est la configuration transmise au constructeur d'observance automatique de l'API Places. Voir la documentation. La configuration correspond à l'argument options dans le doc.

Voir l'exemple ici.

En outre, vous pouvez passer n'importe quelle css class via l'hélice "classe".