ดาวน์โหลด google autocomplete - ดาวน์โหลดซอร์สโค้ดอัตโนมัติ google autocomplete

google autocomplete

ส่วนประกอบของบุคคลที่สาม

vements

ดาวน์โหลด

Google Autocomplete

ฉันกำลังแบ่งปันองค์ประกอบนี้เพราะฉันถูกครอบงำด้วยตัวอย่างที่ซับซ้อนเพื่อให้ได้งานง่าย ๆ นี้ ดังนั้นฉันจะพยายามทำให้ง่ายที่สุดเท่าที่จะทำได้ในระหว่างการอธิบาย

ส่วนประกอบการเติมข้อความอัตโนมัติของ Google นั้นไม่เกิน Vue.js wrapper รอบ ๆ Google Places API อย่างเป็นทางการ ทั้งๆที่มีการสาธิตที่เขียนใน Vue.js วัตถุอัตโนมัติสามารถดึงได้จาก กรอบ JS ใด ๆ

ความต้องการ

คุณจะต้องติดตั้ง Vue & Vuemit:

 npm install vue -- save

 npm install vuemit -- save

ไลบรารี Vuemit ใช้ในการจัดการเหตุการณ์ระหว่างองค์ประกอบของ Google และพาเรนต์

หมายเหตุ: หากคุณใช้ Vue 1.* คุณจะต้องดึงจากสาขา Vue-1

การสาธิต

ดูการสาธิตสด

ตัวอย่าง

การติดตั้ง

ในการติดตั้งแพ็คเกจนี้คุณเพียงแค่เปิดคอนโซลและพิมพ์ npm i google-autocomplete-vue --save หากมีปัญหาใด ๆ ในระหว่างการติดตั้งคุณสามารถลองอีกครั้งโดยใช้ force Param: npm i -f google-autocomplete-vue --save

เริ่มต้น

ก่อนอื่น คุณต้องลงทะเบียนบน Google API Console เพื่อรับคีย์ API ของคุณ: https://console.developers.google.com เมื่อทำสิ่งนี้เสร็จแล้วคุณจะต้องคัดลอก คีย์ API ที่ได้รับจาก Google และวางไว้ในจุดเริ่มต้นไฟล์ JS ของคุณ ตัวอย่าง:

ไฟล์ bootstrap: bootstrap.js คุณจะต้อง ใช้ Vuemit ในไฟล์นี้เพื่อให้มีการตั้งค่า Handler Events Globaly เช่นนี้: ตัวอย่าง
ไฟล์จุดเข้า: demo.js

หมายเหตุ: ต้องเก็บคีย์สำคัญไว้ในไฟล์. ENV ดังนั้นโปรดระวังสิ่งนี้ในขณะที่กดรหัสของคุณไปยังการควบคุม GIT ของคุณ

ประการที่สอง คุณจะต้องนำเข้าส่วนประกอบในจุดเริ่มต้นของแอปพลิเคชันของคุณดังนั้นคุณสามารถเรียกได้ทั่วโลกเมื่อจำเป็น ตัวอย่าง:

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

การตรวจสอบความถูกต้องทางฝั่งเซิร์ฟเวอร์

การตรวจสอบสถานที่เป็น ไลบรารี Laravel ที่จะช่วยคุณจัดการกับที่อยู่ผู้ใช้ของคุณ จุดมุ่งหมายคือการทำให้แน่ใจว่าที่อยู่ที่ส่งโดยผู้ใช้นั้นใช้ได้กับบริการของบุคคลที่สามในฐานะ Google

ดูที่ที่เก็บ: การตรวจสอบสถานที่

แนะนำ

ก่อนอื่นคุณต้องสร้างจุดเข้าเพื่อรวบรวมส่วนประกอบและสร้างไฟล์ชุดข้อมูลของคุณ ตัวอย่างมีอยู่ที่นี่
ประการที่สองคุณจะต้องสร้างวัตถุ Vue ของคุณเพื่อควบคุมส่วนประกอบ:

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

ดูตัวอย่างที่นี่

ประการที่สามคุณต้องรวบรวมไฟล์ทั้งสองนี้ด้วย เบราว์เซอร์ , Webpack หรือ Laravel-Elixir-Vue-2 เพื่อให้สามารถอ่านได้สำหรับทุกเบราว์เซอร์ ตัวอย่าง:

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

ดูตัวอย่างที่นี่

ในที่สุดคุณสามารถใช้ส่วนประกอบในไฟล์ HTML ของคุณโดยใช้ไวยากรณ์นี้:

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

: config คือการกำหนดค่าที่ส่งผ่านไปยังตัวสร้างการเติมข้อความอัตโนมัติของสถานที่ API ดูเอกสาร การกำหนดค่าสอดคล้องกับอาร์กิวเมนต์ options ในเอกสาร

ดูตัวอย่างที่นี่

นอกจากนี้คุณสามารถผ่าน css class ใด ๆ ผ่านเสา "คลาส"