Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/damienroche/vue-custom-google-autocomplete
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
https://github.com/damienroche/vue-custom-google-autocomplete
autocomplete bootstrap4 bulma google-places-api vue
Last synced: about 5 hours ago
JSON representation
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
- Host: GitHub
- URL: https://github.com/damienroche/vue-custom-google-autocomplete
- Owner: damienroche
- Created: 2019-09-25T16:01:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T07:10:47.000Z (about 2 years ago)
- Last Synced: 2024-12-15T13:49:55.666Z (28 days ago)
- Topics: autocomplete, bootstrap4, bulma, google-places-api, vue
- Language: TypeScript
- Homepage:
- Size: 1.95 MB
- Stars: 33
- Watchers: 3
- Forks: 10
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-custom-google-autocomplete
## Installation
You need [Vue.js](https://vuejs.org/) **version 2.0+** and an [Google PLACE API](https://developers.google.com/places/web-service/get-api-key) 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
```bash
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)
```javascript
import Vue from 'vue'
import CustomGoogleAutocomplete from 'vue-custom-google-autocomplete'
...
Vue.use(CustomGoogleAutocomplete)
```
```vue
{{ prediction.description }}
export default {
data() {
return {
selected: null
}
}
}
```
## 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
```javascript
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 :
```javascript
params = {
location: `${lat},${lng}`,
radius: 1000,
language: 'fr'
}
```
See [Optional parameters](https://developers.google.com/places/web-service/autocomplete) 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`.
```javascript
props = {
inputAttrs: Object,
inputEvents: Object,
query: String,
results: Array,
loading: Boolean,
selectPrediction: Function,
hasResults: Boolean
}
```
## Pre-configured Components
### Bulma dropdown markup.
```vue
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'
}
}
}
}
}
```
To customize loading text and no results text, two slots are availables : `loading` and `empty`.
Input is binded with `$attrs`
### Bootstrap dropdown.
```vue
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'
}
}
}
}
}
```
To customize loading text and no results text, two slots are availables : `loading` and `empty`.
Input is binded with `$attrs`