A Vue.js autosuggest component for the Google Places API.
A Vue.js (2.x) autosuggest component for the Google Maps Places API.
Live demo: olefirenko.github.io/vue-google-autocomplete
I have tried to use different Vue Google Autocomplete components, but did not find any that would solve my needs. So below I would like to mention what you can get from this exact component:
This component uses Google Maps Places API to get geo suggests for autocompletion, so you have to include the Google Maps Places API in theof your HTML:
… <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script> …
The easiest way to use Vue Google Autocomplete is to install it from npm or yarn.
npm install vue-google-autocomplete --save
yarn add vue-google-autocomplete
The Vue Google Autocomplete works out of the box by just including it.
import VueGoogleAutocomplete from 'vue-google-autocomplete'
In your template you can use this syntax: ```html <vue-google-autocomplete id="map" classname="form-control" placeholder="Start typing" v-on:placechanged="getAddressData"
requiredID for the input container.
Class to the input container.
The input field will get this placeholder text.
Types supported in place autocomplete requests. More info
You may find this example helpful.
['address_components', 'adr_address', 'alt_id', 'formatted_address', 'geometry', 'icon', 'id', 'name', 'permanently_closed', 'photo', 'place_id', 'scope', 'type', 'url', 'utc_offset', 'vicinity']
Set which data fields to return in the PlaceResult from the Google Autocomplete API when the user selects a place. Google Autocomplete API by default returns all available data fields for the selected place, which may result in additional charges and thus the API users might pay for data they don't need. This package sets a sensible default for the fields value, fetching only the Basic Data fields which do not result in any additional charges. If you want to fetch other fields in addition to the default ones, make sure that the array you pass in to the
fieldsprop contains the default fields listed above, and not only the additional fields you want to fetch.
Refer to this page for more details on how certain data fields are billed.
Option to restrict the autocomplete search to a particular country. Countries must be passed as a two-character, ISO 3166-1 Alpha-2 compatible country code (i.e. "br", "sg", "fr"). You can provide a single one, or an array of up to 5 country code strings. Note: this is a dynamic property. You must pass it as
:country=""to your component, otherwise it won't work. For example:
htmlwill restrict the countries to Australia and New Zealand.
Bias the search towards user current location.
The component emits next events, which you can listen in your application:
Gets triggered when the address data got obtained. This data is available on the returned objects: *
place- PlaceResult object is available as second parameter. *
ida String representing the ID of the autocomplete that triggered the event.
Gets triggered when a user entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed. *
objectan object with a key name representing the user's input.
Gets triggered when the autocomplete input field receives focus.
Gets triggered when the autocomplete input field loses focus.
Gets triggered every time autocomplete input got changed
Gets triggered when the autocomplete results got changed
Gets triggered when a key gets pressed
Gets triggered when an error is encountered
These functions are accessible by setting "ref" on the component (Refs documentation). See example below how to use these functions.
Call to clear the value of the user input.
Call focus to focus on the element
Call blur to blur (unfocus) the element
Call to update the user input with a new value
Call to force coordinates and update the input accordingly
Call to retrieve current position from
navigatorand update the input accordingly
Please note that you need to provide what method will listen (
v-on:placechanged) to an event when the address data is obtained.
The example below shows the correct usage of the
typesparameter, when limiting the search to cities: