gomah / vue-places Goto Github PK

View Code? Open in Web Editor NEW

108.0 3.0 7.0 3.57 MB

Places component is based on places.js for Vue 2.x. Turn any <input> into an address autocomplete.

Home Page: https://www.npmjs.com/package/vue-places

License: MIT License

Vue 19.93% JavaScript 80.07%

vue vuejs vuejs2 places algolia autocomplete input

vue-places's Introduction

vue-places

Places component is based on places.js for Vue 2.x.

Turn any into an address autocomplete

Installation

# yarn
$ yarn add vue-places

# npm
$ npm install vue-places --save

Example

<template>
  <places
    v-model="form.country.label"
    placeholder="Where are we going ?"
    @change="val => { form.country.data = val }"
    :options="options">
  </places>
</template>

<script>
import Places from 'vue-places';

export default {
  data() {
    return {
      options: {
        appId: <YOUR_PLACES_APP_ID>,
        apiKey: <YOUR_PLACES_API_KEY>,
        countries: ['US'],
      },
      form: {
        country: {
          label: null,
          data: {},
        },
      },
    };
  },
  components: {
    Places,
  },
}
</script>

Algolia Places Documentation

vue-places's People

Contributors

Stargazers

Watchers

Forkers

cuulee picsoung trendingtechnology danielkita faizaajmal degouville massimiliano76

vue-places's Issues

Changing input value format after selecting suggestion

Hello Thomas,

Thank you very much for your package!

I'm trying to change the format of the input value after selecting an address. Currently, the input shows the suggestion.value which is a full, formatted address such as:
1600 Pennsylvania Avenue, Washington, District of Columbia, United States of America

However, I'd like to show only the suggestion.name, which is 1600 Pennsylvania Avenue in my example. Pretty much what Algolia is doing here: https://community.algolia.com/places/examples.html#complete-form

I've tried various things without luck. Do you have any idea how I would go about doing this using your package?

Thanks a lot,
Nicolas

Nuxt integration

Hi,

Is there any possible integration for Nuxt framework ?

Thank you.

Get name option from data generated

Hey, thanks for this easy to use map selector.

I just wonder how to get the name from the data and assign it as a value?

Example data generated

Also can you please update the read.me showing what options we can use? Thanks

Add more examples

Add official "Algolia Places" examples into a simple Vue application.

make options reactive

Hello, thanks for the component!
I was thinking to add the following code that will update the autocomplete settings every time the options change

watch: {
    options: function (new_options) {
      this.$emit('input', "");
      this.placesAutocomplete.destroy();
      this.options.container = this.options.container || this.$el;
      this.placesAutocomplete = places(this.options);
    }
  },

Is there any Way to "Rebuild" the places Object by country.data.hit.objectID

the title sounds confusing, but here is the case: i use vue-places to find and save lat,lng data: works well.
but it's impossible to "refill" vue-places (by country.data.hit.objectID) with the data for a edit the same data.

How to display the map

How to display the map using leaflet ?

name attribute

Hello,

First, thanks for this nice component !

I'm using it on an old form and the generated input field is lacking a name attribute. Instead of reworking the whole thing, I've just put a hidden field bound to the right property fed by algolia.

Instead of having this workaround, would it be possible to have a name prop/option so that the shown value would be submitted with the rest of the form ?

Readme edit

It is not working as is in the example, it needs language parameter. Consider changing country to language for example.