Natural Pleistocene Monsters

    vue-better-google-places-autocomplete

    1.1.0 • Public • Published

    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.

    <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.

    <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 Search</label>
            <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.

    <google-places-autocomplete>
        <span slot="item" slot-scope="{ place }">
            {{ place.description }}
        </span>
        <span slot="activeItem" slot-scope="{ place }">
            {{ place.description }}
        </span>
    </google-places-autocomplete>

    Install

    npm i vue-better-google-places-autocomplete

    DownloadsWeekly Downloads

    164

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • dewsign