在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):gocanto/google-autocomplete开源软件地址(OpenSource Url):https://github.com/gocanto/google-autocomplete开源编程语言(OpenSource Language):JavaScript 69.0%开源软件介绍(OpenSource Introduction):Google AutocompleteI 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. Google Autocomplete component is no more than a RequirementsYou will have to install Vue & Vuemit: npm install vue --save npm install vuemit --save The Vuemit library is used to manage the events between the google component and its parent one. Note: If you happen to be using DemoView live demo. InstallationTo install this package you just need to open your console and type Getting startedFirst of all, you have to sign up on Google API Console to get your API key: https://console.developers.google.com Once 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:
Second of all, you will have to import the component in your application entry point, so you can call it globally when needed. Example: import GoogleAutocomplete from 'google-autocomplete-vue'; Validation on server sidePlaces 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. Take a look at its repository: Places Validation Guide
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 = {};
}
}
}); See the example here.
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');
}); See the example here
<google-autocomplete
class = "input"
input_id = "txtAutocomplete"
:config = "{type: ['geocode']}"
placeholder = "type your address"
>
</google-autocomplete> :config is the config passed to the Autocomplete constructor of the places API. See the documentation. Config corresponds to the See the example here. Also, you can pass any ContributingPlease feel free to fork this package and contribute by submitting a pull request to enhance the functionalities. LicenseThe MIT License (MIT). Please see License File for more information. How can I thank you?Why not star the github repo? Share the link for this repository on Twitter? Spread the word! Don't forget to follow me on twitter! Thanks! Gustavo Ocanto. [email protected] |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论