google autocompleteダウンロード-Google google autocompleteソースコードのダウンロード

google autocomplete

サードパーティ製コンポーネント

vements

ダウンロード

Google AutoComplete

この単純な仕事を達成するために複雑な例に圧倒されたので、私はこのコンポーネントを共有しています。だから、私は説明の中でできる限りシンプルになろうとします。

Google AutoCompleteコンポーネントは、Google Places APIをめぐるVue.jsラッパーにすぎません。 Vue.jsで書かれたデモにもかかわらず、Autocompleteオブジェクトは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

はじめる

まず、APIキーを取得するには、 Google APIコンソールにサインアップする必要があります：https：//console.developers.google.comこれが完了したら、 Googleで与えられたAPIキーをコピーしてJSファイルエントリポイントに貼り付ける必要があります。例：

ブートストラップファイル：bootstrap.js。イベントハンドラーをGlobalyに設定するには、このファイルのVuemitを要求する必要があります。そう：例
エントリポイントファイル：demo.js

注：重要なキーは.ENVファイル内に保持する必要があるため、コードをgitコントロールにプッシュしながら、これに注意してください。

第二に、アプリケーションのエントリポイントにコンポーネントをインポートする必要があるため、必要に応じてグローバルに呼び出すことができます。例：

 import GoogleAutocomplete from 'google-autocomplete-vue' ;

サーバー側の検証

Places検証は、ユーザーアドレスを処理するのに役立つLaravelライブラリです。その目的は、Googleのように、ユーザーが提出したアドレスがサードパーティサービスを通じて有効であることを確認することです。

リポジトリ：Places検証をご覧ください

ガイド

まず、コンポーネントをコンパイルしてバンドルファイルを生成するためのエントリポイントを作成する必要があります。例はこちらから入手できます。
第二に、コンポーネントを制御するには、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 = { } ;
        }
    }
} ) ;

こちらの例を参照してください。

3番目に、これら2つのファイルをbrowserify 、 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 >