🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

Overview

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)
{{ prediction.description }}
">
<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 might also like...
🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks 🧱 Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

🔍 Vue autosuggest component.
🔍 Vue autosuggest component.

vue-autosuggest 🔍 Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Owner
Develop
Develop
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

Ilia Loginov 48 Dec 28, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Ahmed Abdallah 16 Jan 10, 2022