تنزيل google autocomplete - تنزيل رمز مصدر google autocomplete

google autocomplete

مكونات الطرف الثالث

vements

تنزيل

جوجل الإكمال التلقائي

أنا أشارك هذا المكون لأنني غمرت أمثلة معقدة لتحقيق هذه المهمة البسيطة. لذا ، سأحاول أن أكون بسيطًا قدر استطاعتي أثناء توضيحي.

مكون الإكمال التلقائي لـ Google ليس أكثر من غلاف Vue.js حول واجهة برمجة تطبيقات أماكن Google الرسمية. على الرغم من العرض التوضيحي المكتوب في Vue.js ، يمكن سحب الكائن الإكمال التلقائي من أي إطار JS .

متطلبات

سوف تضطر إلى تثبيت Vue & Vuemit:

 npm install vue -- save

 npm install vuemit -- save

تُستخدم مكتبة Vuemit لإدارة الأحداث بين مكون Google و Aporting.

ملاحظة: إذا كنت تستخدم Vue 1.* ، فسيتعين عليك السحب من فرع Vue-1.

العرض التوضيحي

عرض التوضيح المباشر.

مثال

تثبيت

لتثبيت هذه الحزمة ، تحتاج فقط إلى فتح وحدة التحكم الخاصة بك واكتب npm i google-autocomplete-vue --save . إذا كانت هناك أي مشاكل أثناء التثبيت ، فيمكنك المحاولة مرة أخرى باستخدام force PARAM: npm i -f google-autocomplete-vue --save

ابدء

بادئ ذي بدء ، يجب عليك التسجيل على وحدة التحكم في Google API للحصول على مفتاح API الخاص بك: https://console.developers.google.com بمجرد الانتهاء من ذلك ، سيتعين عليك نسخ مفتاح API المقدم من Google ولصقه في نقطة إدخال ملف JS الخاصة بك. مثال:

ملف bootstrap: bootstrap.js. يجب أن تطلب من Vuemit في هذا الملف أن يكون لدى Globaly 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 >