Google autocomplete places with q-input

[Mauri]

Hi! I want to have autocomplete places google inside q-input, with input tag it works well but i can’t get it works with q-input. Any ideas?

Thanks!

[mKomo]

Hi, maybe give QSelect a go instead of q-input,

see: QSelect-autocomplete

you can always make it look like a normal input field if you like

or for greater customization you can make your own field with the QField wrapper

[Mauri]

@mKomo said in Google autocomplete places with q-input:

Hi, maybe give QSelect a go instead of q-input,

see: QSelect-autocomplete

you can always make it look like a normal input field if you like

or for greater customization you can make your own field with the QField wrapper

Thanks! I’m going to try this

[Rohit]

@Mauri what solution did work for you

[Rohit]

Here is the solution that worked for me without any package.
it might help some one.
<template>
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>
</template>

and in mounted
<script>
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});
<script>

[nulele]

For anybody has trouble showing the dropdown list on cordova app, the problem for me was the css. I solved with this instruction:

.pac-container {
z-index: 9999 !important;
}