luigi7up / vue-google-autocomplete

A Vue.js autosuggest component for the Google Places API.

This is my fork of https://github.com/olefirenko/vue-google-autocomplete

Changes in the fork

Input type

In the original VueAutoComplete autocomplete input type is set to text and it cannot be changed.

Now, you can initialize the component and change the input to whatever you want:

<vue-google-autocomplete type="number" ...></vue-google-autocomplete>

<vue-google-autocomplete type="text" ...></vue-google-autocomplete>

The default value is type="text"

Inputmode

If you want to change the behaviour of the keyboard on a mobile phone once the input is focused you can control it with inputmode attribute.

If you want the keyboard to be a numeric one only then initializae the component like this:

<vue-google-autocomplete inputmode="number" ...></vue-google-autocomplete>

The default value is inputmode="text"

Autofocus

You can now decide to autofocus the input field of the autocomplete component

<vue-google-autocomplete autofocus=true></vue-google-autocomplete>

It accepts a boolean. The default is set to false

onFocus and onBlur emit also the event object

The handlers you attach to onFocus and onBlur events receives the event object that you can use. Quite useful if after interaction with the input form you want know any details regarding the actual DOM element.

#Example usage

• input type is text
• inputmode is numeric
• onFocus handler receives the event object

<vue-google-autocomplete
        id="zipcode"
        ref="toAddress"
        classname="input is-medium"
        type="text"
        inputmode="numeric"
        autofocus=true
        placeholder="Ejemplo: 28001"
        v-on:placechanged="getToData"
        v-on:focus="handlZipCodeFocused($event)"
        types="(regions)"
        country="es">
      </vue-google-autocomplete>

Notice that handler for the focus event v-on:focus="handlZipCodeFocused($event)" now receives the event object also.

Handler gets called with the event as an argument

const handlZipCodeFocused = (event)=>{
  window.scrollTo({
    top: event.currentTarget.offsetTop,
    left: 0,
    behavior: 'smooth'
  });
}