Unduh google autocomplete - Unduh Kode Sumber google autocomplete

google autocomplete

Komponen pihak ketiga

vements

Unduh

Google AutoComplete

Saya berbagi komponen ini karena saya kewalahan oleh contoh -contoh rumit untuk mencapai pekerjaan sederhana ini. Jadi, saya akan mencoba sesederhana mungkin selama penjelasan saya.

Komponen Google AutoComplete tidak lebih dari pembungkus Vue.js di sekitar API Google Places resmi. Terlepas dari demo yang ditulis dalam Vue.js , objek pelengkapan otomatis dapat ditarik dari kerangka JS apa pun.

Persyaratan

Anda harus menginstal Vue & Vuemit:

 npm install vue -- save

 npm install vuemit -- save

Perpustakaan Vuemit digunakan untuk mengelola peristiwa antara komponen Google dan induknya.

Catatan: Jika Anda kebetulan menggunakan Vue 1.* , Anda harus menarik dari cabang Vue-1.

Demo

Lihat demo langsung.

contoh

Instalasi

Untuk menginstal paket ini, Anda hanya perlu membuka konsol Anda dan mengetikkan npm i google-autocomplete-vue --save . Jika ada masalah selama instalasi, Anda dapat mencoba lagi menggunakan Param force : npm i -f google-autocomplete-vue --save

Memulai

Pertama -tama , Anda harus mendaftar di Google API Console untuk mendapatkan kunci API Anda: https://console.developers.google.com Setelah ini selesai, Anda harus menyalin kunci API yang diberikan oleh Google dan menempelkannya di titik masuk file JS Anda. Contoh:

File bootstrap: bootstrap.js. Anda harus meminta Vuemit dalam file ini agar acara Handler Set Globaly. Seperti demikian: contoh
File titik masuk: demo.js

Catatan: Kunci penting harus disimpan dalam file .env, jadi perhatikan ini sambil mendorong kode Anda ke kontrol git Anda.

Kedua , Anda harus mengimpor komponen di titik masuk aplikasi Anda, sehingga Anda dapat menyebutnya secara global saat dibutuhkan. Contoh:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

Validasi di sisi server

Validasi tempat adalah perpustakaan Laravel yang akan membantu Anda menangani alamat pengguna Anda. Tujuannya adalah memastikan alamat yang dikirimkan oleh pengguna valid melalui layanan pihak ke -3, sebagai Google.

Lihat Repositori: Tempat Validasi

Memandu

Pertama -tama, Anda harus membuat titik masuk untuk mengkompilasi komponen dan menghasilkan file bundel Anda. Contoh tersedia di sini.
Kedua, Anda harus membuat objek VUE Anda untuk mengontrol komponen:

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

Lihat contohnya di sini.

Ketiga dari semuanya, Anda harus menyusun kedua file ini dengan Browserify , Webpack atau Laravel-Elixir-Vue-2 untuk membuatnya dapat dibaca untuk setiap browser. Contoh:

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

Lihat contohnya di sini

Akhirnya, Anda dapat menggunakan komponen dalam file HTML Anda menggunakan sintaks ini:

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

: config adalah konfigurasi yang diteruskan ke konstruktor AutoComplete dari API Tempat. Lihat dokumentasinya. Config sesuai dengan argumen options di DOC.

Lihat contohnya di sini.

Anda juga dapat melewati css class apa pun melalui prop "kelas".