{"id":968512,"url":"https://github.com/gocanto/google-autocomplete","last_synced_at":"2025-04-04T20:08:52.172Z","repository":{"id":41150357,"uuid":"62409347","full_name":"gocanto/google-autocomplete","owner":"gocanto","description":"Google Autocomplete Vue Component","archived":false,"fork":false,"pushed_at":"2023-04-17T07:59:32.000Z","size":1109,"stargazers_count":278,"open_issues_count":2,"forks_count":47,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-30T08:16:27.837Z","etag":null,"topics":["components","google","google-autocomplete","javascript","vuejs"],"latest_commit_sha":null,"homepage":"https://gocanto.github.io/google-autocomplete","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gocanto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-01T17:31:57.000Z","updated_at":"2024-06-22T13:26:40.000Z","dependencies_parsed_at":"2024-06-19T05:15:34.435Z","dependency_job_id":"2e80d311-7c80-4c5c-bf76-72235b9defec","html_url":"https://github.com/gocanto/google-autocomplete","commit_stats":{"total_commits":71,"total_committers":8,"mean_commits":8.875,"dds":0.647887323943662,"last_synced_commit":"bf4715901309c3067061d2ea6bf5141e69002a0e"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocanto%2Fgoogle-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocanto%2Fgoogle-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocanto%2Fgoogle-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gocanto%2Fgoogle-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gocanto","download_url":"https://codeload.github.com/gocanto/google-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242678,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","google","google-autocomplete","javascript","vuejs"],"created_at":"2024-01-13T14:05:53.814Z","updated_at":"2025-04-04T20:08:52.131Z","avatar_url":"https://github.com/gocanto.png","language":"JavaScript","readme":"# Google Autocomplete\n\n\u003ca href=\"https://gocanto.github.io/google-autocomplete/\"\u003e\u003cimg src=\"https://img.shields.io/badge/online-demo-green.svg\" alt=\"Demo\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/google-autocomplete-vue\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/google-autocomplete-vue.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/google-autocomplete-vue\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/google-autocomplete-vue.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/google-autocomplete-vue\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/google-autocomplete.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/easiest-js-validator.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/gocanto/google-autocomplete/tree/vue-1\"\u003e\u003cimg src=\"https://img.shields.io/badge/Vue%201.*-passed-orange.svg\" alt=\"Vue1.*\"\u003e\u003c/a\u003e\n\n\nI am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as simple as I can during my explanation.\n\nGoogle Autocomplete component is no more than a ```Vue.js``` wrapper around the official Google Places API. In spite of the demo written in ```Vue.js```,  the Autocomplete object can be pulled in from any ***JS framework***.\n\n\n# Requirements\nYou will have to install Vue \u0026 Vuemit:\n\n```js\nnpm install vue --save\n```\n\n```js\nnpm install vuemit --save\n```\n\nThe \u003ca href=\"https://github.com/gocanto/vuemit\" target=\"_blank\"\u003eVuemit library\u003c/a\u003e is used to manage the events between the google component and its parent one.\n\n\n***Note:*** If you happen to be using ```Vue 1.*```, you will have to pull from the \u003ca href=\"https://github.com/gocanto/google-autocomplete/tree/vue-1\" target=\"_blank\"\u003evue-1\u003c/a\u003e branch.\n\n\n# Demo\n\nView \u003ca href=\"https://gocanto.github.io/google-autocomplete/\" target=\"_blank\"\u003elive demo\u003c/a\u003e.\n\n![example](https://github.com/gocanto/google-autocomplete/blob/master/src/images/example.gif)\n\n\n# Installation\nTo install this package you just need to open your console and type ```npm i google-autocomplete-vue --save```. If there are any problems during the installation, you can try again using the ```force``` param: ```npm i -f google-autocomplete-vue --save```\n\n\n## Getting started\n\n***First of all***, you have to sign up on ***Google API Console*** to get your API key:\n\u003ca href=\"https://console.developers.google.com\"\u003ehttps://console.developers.google.com\u003c/a\u003e\nOnce this has been done, you will have to copy the ***API KEY given by google*** and paste it in your JS file entry point. Example:\n\n- Bootstrap File: \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/src/js/bootstrap.js\"\u003ebootstrap.js\u003c/a\u003e. You will have to ***require Vuemit*** in this file to have the events handler set globaly. As so: \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/src/js/bootstrap.js#L23\"\u003eExample\u003c/a\u003e\n\n- Entry point file: \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/src/js/demo.js\"\u003edemo.js\u003c/a\u003e\n\n\u003e **Note:** Important keys have to be kept within an .env file, so be aware of this while pushing your code to your git control.\n\n\n***Second of all***, you will have to import the component in your application entry point, so you can call it globally when needed. Example:\n\n```js\nimport GoogleAutocomplete from 'google-autocomplete-vue';\n```\n\n\n## Validation on server side\n\nPlaces validation is a ***laravel library*** that will help you out to handle your user addresses. Its aim is making sure addresses submitted by users are valid through 3rd party services, as google.\n\nTake a look at its repository: \u003ca href=\"https://github.com/gocanto/places-validation\"\u003ePlaces Validation\u003c/a\u003e\n\n\n# Guide\n\n* First of all, you have to create an entry point to compile the component and generate your bundle file. An example is available \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/src/js/demo.js\" target=\"_blank\"\u003ehere\u003c/a\u003e.\n\n\n* Second of all, you will have to create your vue object to control the component:\n\n```javascript\n\nrequire('./bootstrap');\n\n\nnew Vue({\n\n    el: '#demo',\n\n\n    data:\n    {\n        output: {}, address: {}, sent: false, response: {}, config: {}\n    },\n\n\n    mounted()\n    {\n        //Set an event listener for 'setAddress'.\n        Vuemit.listen('setAddress', this.onAddressChanged);\n        Vuemit.listen('addressWasCleared', this.onAddressCleared);\n    },\n\n\n    methods:\n    {\n        /**\n         * Submit the data to be evaluated.\n         *\n         * @return {Void}\n         */\n        submit()\n        {\n            this.sent = true;\n            this.output = this.address;\n            this.address = {};\n        },\n\n\n        /**\n         * Checks whether the output data is valid.\n         *\n         * @return {Bool}\n         */\n        isValid()\n        {\n            return Object.keys(this.output).length \u003e 0;\n        },\n\n\n        /**\n         * Checks whether the output data is not valid.\n         *\n         * @return {Bool}\n         */\n        isNotValid()\n        {\n            return ! this.isValid();\n        },\n\n\n        /**\n         * The callback fired when the autocomplete address change event is fired.\n         *\n         * @param {Object}\n         * @return {Void}\n         */\n        onAddressChanged(payload)\n        {\n            if (Object.keys(paypload.place).length \u003e 0) {\n                this.address = payload.address;\n                this.response = payload.response;\n            }\n        }\n\n        /**\n         * The callback fired when the autocomplete clear event is fired.\n         *\n         * @param {Object}\n         * @return {Void}\n         */\n        onAddressCleared()\n        {\n            this.address = {};\n            this.response = {};\n        }\n    }\n});\n```\n\nSee the example \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/src/js/demo.js\" target=\"_blank\"\u003ehere\u003c/a\u003e.\n\n\n* Third of all, you have to compile these two files with **browserify**, **webpack** or **laravel-elixir-vue-2** to make them readable for every browser. Example:\n\n```javascript\nrequire('laravel-elixir-vue-2');\nvar elixir = require('laravel-elixir');\n\nelixir.config.sourcemaps = false;\nelixir.config.assetsPath = 'src';\n\nelixir(function(mix)\n{\n    mix.webpack('demo.js', 'dist/demo.js');\n});\n```\n\nSee the example \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/gulpfile.js#L10\" target=\"_blank\"\u003ehere\u003c/a\u003e\n\n\n* Finally, you can use the component in your **HTML** file using this syntax:\n\n```HTML\n\u003cgoogle-autocomplete\n    class = \"input\"\n    input_id = \"txtAutocomplete\"\n    :config = \"{type: ['geocode']}\"\n    placeholder = \"type your address\"\n\u003e\n\u003c/google-autocomplete\u003e\n```\n\n***:config*** is the config passed to the Autocomplete constructor of the places API. See the \u003ca href=\"https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete\"\u003edocumentation\u003c/a\u003e. Config corresponds to the `options` argument in the doc.\n\nSee the example \u003ca href=\"https://github.com/gocanto/google-autocomplete/blob/master/demo/index.html#L50-L54\" target=\"_blank\"\u003ehere\u003c/a\u003e.\n\n\nAlso, you can pass any ```css class``` through the \"class\" prop.\n\n\n# Contributing\n\nPlease feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.\n\n\n# License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n\n# How can I thank you?\nWhy not star the github repo? Share the link for this repository on Twitter? Spread the word!\n\n\nDon't forget to [follow me on twitter](https://twitter.com/gocanto)!\n\nThanks!\n\nGustavo Ocanto.\ngustavoocanto@gmail.com\n","funding_links":[],"categories":["JavaScript","Awesome Vue.js","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Autocomplete"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocanto%2Fgoogle-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgocanto%2Fgoogle-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgocanto%2Fgoogle-autocomplete/lists"}