Skip to content
πŸ” Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
TypeScript Vue JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
public add bootstrap example Sep 27, 2019
src
tests/unit init repo + beta version Sep 25, 2019
.env.example
.gitignore
.postcssrc.js init Sep 24, 2019
README.md update deepSearch default value Oct 10, 2019
babel.config.js
jest.config.js init Sep 24, 2019
package.json
tsconfig.json init Sep 24, 2019
tslint.json
yarn.lock update component + add README Sep 26, 2019

README.md

vue-custom-google-autocomplete

Custom Google Autcomplete using Place API

Installation

You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes without any css as the main goal is to use it with differents frameworks.

If you looking for framework oriented components, you can import them separately (see pre-configured section) PR are welcome for other components

Install via npm

npm install vue-custom-google-autocomplete
yarn add vue-custom-google-autocomplete

Import and use

Note: if you want a specific preconfigured component, skit this step and import it as a simple component (see pre-configured section)

import Vue from 'vue'
import CustomGoogleAutocomplete from 'vue-custom-google-autocomplete'

...

Vue.use(CustomGoogleAutocomplete)
<template>
  <custom-google-autocomplete :options="options" @select="selected = $event)")
    <div slot-scope="{ inputAttrs, inputEvents, loading, results, query, selectPrediction, hasResults }">
      <input type="search" v-bind="inputAttrs" v-on="inputEvents" />
      <div v-for="(prediction, index) in results" :key="'prediction-' + index" @click="selectPrediction(prediction)">
        {{ prediction.description }}
      </div>
    </div>
  </custom-google-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      selected: null
    }
  }
}
</script>

Props

Name Type Default Description
options Object see options section Plugin options (see options section)

You can also pass all props available on an input (placeholder, name..)

Options

options = {
  apiKey: YOUR_API_KEY,
  deepSearch: true,
  cors: false,
  params: {},
  focus: false
}
Name Type Default Description
apiKey String null Your Google PLACE Api key (REQUIRED)
deepSearch Boolean false Get more informations about selected place (geometry etc..)
cors Boolean false Set to true when project is running locally
params Object {} Google Autocomplete optional parameters
focus Boolean false Focus input
debounceTime Number 400 Time in ms before trigger a new Google api call

Params object is useful to refine predictions, for example if you want to get first predictions near to a location within a radius distance in a certain language you can set params like this :

params = {
  location: `${lat},${lng}`,
  radius: 1000,
  language: 'fr'
}

See Optional parameters section for more informations

Events

@select event is triggered when a prediction is selected. It send an object with datas about the location

Template and slot-scope

In order to be more flexbile, you are able to make your own results template with slot-scope.

props = {
  inputAttrs: Object,
  inputEvents: Object,
  query: String,
  results: Array,
  loading: Boolean,
  selectPrediction: Function,
  hasResults: Boolean
}

Pre-configured Components

Bulma dropdown markup.

Custom Google Autcomplete Example with Bulma Dropdown

<template>
  <bulma-dropdown(:options="options" @select="selected = $event") placeholder="Search"/>
</template>

<script>
import { BulmaDropdown } from 'vue-custom-google-autocomplete'

export default {
  components: {
    BulmaDropdown
  },
  data() {
    return {
      selected: null,
      options: {
        apiKey: process.env.VUE_APP_PLACE_API_KEY,
        deepSearch: true,
        cors: true,
        focus: false,
        params: {
          location: '43.3,5.4',
          radius: 1000,
          language: 'fr'
        }
      }
    }
  }
}
</script>

To customize loading text and no results text, two slots are availables : loading and empty. Input is binded with $attrs

Bootstrap dropdown.

Custom Google Autcomplete Example with Bootstrap Dropdown

<template>
  <bootstrap-dropdown(:options="options" @select="selected = $event") name="input-name"/>
</template>

<script>
import { BootstrapDropdown } from 'vue-custom-google-autocomplete'
export default {
  components: {
    BootstrapDropdown
  },
  data() {
    return {
      selected: null,
      options: any = {
        apiKey: process.env.VUE_APP_PLACE_API_KEY,
        deepSearch: true,
        cors: true,
        focus: false,
        params: {
          location: '45.52345,-122.67621',
          radius: 1000,
          language: 'en'
        }
      }
    }
  }
}
</script>

To customize loading text and no results text, two slots are availables : loading and empty. Input is binded with $attrs

You can’t perform that action at this time.