A Vue components to provide address search functionality with improved user experience and advanced customisation options

Overview

Better Google Places Autocomplete implementation for Vue.js

A Vue components to provide address search functionality with improved user experience and advanced customisation options.

Component Demo

Example implementations can be found in our demo repository

Key Improvements

  • Allow enter key to select the first search result
  • Keyboard navigation
  • Customisability
  • Simplified events handling

Installation

npm i vue-better-google-places-autocomplete

You can either import the package as a plugin or the components.

Plugin usage

import GooglePlacesAutocompletePlugin from 'vue-better-google-places-autocomplete'

Vue.use(GooglePlacesAutocompletePlugin)

Component usage

import { GooglePlacesAutocomplete } from 'vue-better-google-places-autocomplete'

Vue.component('google-places-autocomplete', GooglePlacesAutocomplete)

Prerequisites

The plugin assumes that the Google Maps API has been loaded and is accessible via window.google.

Usage

The component itself comes with very basic defaults and assumes that you will either style the default output or use the named scoped slots to customise each element.

Basic usage will output an input text box and an unordered list for returned entries.

<template>
  <div>
    <google-places-autocomplete />
  div>
template>

Dealing with results

The component emits events which you can use to respond to address search selection.

place = placeDetail" @resultCleared="() => place = null" />">
<google-places-autocomplete
    @resultChanged="placeDetail => place = placeDetail"
    @resultCleared="() => place = null"
/>

resultChanged

This event is fired when a user has selected an address from a search. This will include the PlaceDetails as the event payload.

resultCleared

This event is fired when the user has removed all text from the search box or clicked the clear icon. Useful for re-centering the results map for example.

Pre-populating search and results

Sometimes you may with to pre define the search query and/or result as defaults for the component. E.g. if you have multiple search components on different screen and need to maintain the same results for both.

place = placeDetail" @resultCleared="() => place = null" value="London, UK" :place="defaultPlace" />">
<google-places-autocomplete
    @resultChanged="placeDetail => place = placeDetail"
    @resultCleared="() => place = null"
    value="London, UK"
    :place="defaultPlace"
/>

Customisation

Two scoped-slots are provided to customise the search input box and the results

Search Input

">
<google-places-autocomplete>
    <div slot="input" slot-scope="{ context, events, actions }">
        <label for="locationInput">Address Searchlabel>
        <input
            v-model="context.input"
            @focus="events.inputHasReceivedFocus"
            @input="events.inputHasChanged"
            @keydown.enter.prevent="actions.selectItemFromList"
            @keydown.down.prevent="actions.shiftResultsSelection"
            @keydown.up.prevent="actions.unshiftResultsSelection"
            type="search"
            id="locationInput"
            placeholder="Type something ..."
        >
    div>
google-places-autocomplete>

Search Results

The underlying ul and li are not accessible via slots but you can style them using the provided css class on the ul, .vbga-results. Additionally, the currently selected list item will receive a highlighted class.

{{ place.description }} {{ place.description }} ">
<google-places-autocomplete>
    <span slot="item" slot-scope="{ place }">
        {{ place.description }}
    span>
    <span slot="activeItem" slot-scope="{ place }">
        {{ place.description }}
    span>
google-places-autocomplete>
You might also like...
Autocomplete Component for Vue.Js
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

Google Autocomplete Vue Componet
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

A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

🧱 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

Mention component for Vue.js
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

Swapi - vue-3 front for SWAPI

swapi Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and

Vue 2 Component to make Autocomplete element.
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

 🔍 Autosuggest component built for Vue
🔍 Autosuggest component built for Vue

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

vue autoComplete component

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

Comments
  • Restrict country and extends options

    Restrict country and extends options

    • Support restrict country
    • Extends options

    we can replace more options, follow this document to get more details.

    https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest

    opened by CasperLaiTW 0
Releases(v1.1.0)
  • v1.1.0(Apr 8, 2019)

    Allow the component to be pre-populated with a default search text and optionally a default result which is returned if the input value has not changed through two new props:

    value for the default search text and place for the associated place.

    Source code(tar.gz)
    Source code(zip)
Owner
Dewsign
A creative studio of digital product designers and engineers. Building businesses since 1999.
Dewsign
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

Santiago Blanco 420 Dec 27, 2022
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
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 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
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Muhamad Septian 0 Dec 3, 2019
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
🔍 Vue autosuggest component.

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

Darren Jennings 599 Dec 31, 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