A Vue.js autosuggest component for the Google Places API.
The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
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.
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: