Google Places Autocomplete using Q-Input not working but works with Input

avistad

I am trying to use the Google Places Autocomplete API. I cannot get q-input to do the autocomplete. But if I use input it works. The screenshots clearly the outcomes on the two elements.
How can I make q-input work like input without installing anything new?

The code used is:

    <input type="text" placeholder="Enter your address" id="autocomplete" />
    <q-input type="text" placeholder="Enter your address" id="autocomplete" />

  mounted () {
    const input = document.getElementById("autocomplete") as HTMLInputElement;
    const autocomplete = new google.maps.places.Autocomplete(input);
  },

And in index.template.html

    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDp6_pFytAjg4BA83uaNTqhBs6LSHpu488&libraries=places&callback=initMap">
    </script>

Screenshots 1 and 2:

metalsadman

@avistad try using a ref instead of Id on your qinput, and refer to the wrapped inner input. Ie. this.$refs.myQinput.$refs.input or this.$refs.myQinput.$el.$refs.input, can’t test atm, but something along those lines, or just simply console.log your qinput’s refs and check the object to see the ref of the wrapped native html input in the node.

avistad

Thanks @metalsadman . I feel a bit embarrassed to say this but I didnt fully grasp the solution you suggested. I am actually new to both VueJS and Quasar.
So what I understood is I should try to console.log(this.$refs.myQinput.$refs) and then find which object is referenced and use “ref” to point to that?
(I dont know what “ref” is but I will read up about it)
Thanks a lot again!

dobbel

@avistad

here’s an article about quasar and google places api:
https://nsrtechx.com/quasar-google-maps-with-places/

avistad

@dobbel Thanks!

avistad

@metalsadman said in Google Places Autocomplete using Q-Input not working but works with Input:

@avistad try using a ref instead of Id on your qinput, and refer to the wrapped inner input. Ie. this.$refs.myQinput.$refs.input or this.$refs.myQinput.$el.$refs.input, can’t test atm, but something along those lines, or just simply console.log your qinput’s refs and check the object to see the ref of the wrapped native html input in the node.

Hey metalsadman - Your solution worked !!! Thanks a lot ! Use of $ref was new to me. I have edited the post to show the solution I implemented. But how did you know that ref would work?

avistad

This is solved now. Thanks to @metalsadman !

---- solution ----
I modified q-input thus:

    <q-input type="text" placeholder="Enter your address" id="Qautocomplete" ref="Qautocomplete" @keypress="autocompleteLocation" />

and under scripts:

    autocompleteLocation () {
      const input = document.getElementById(this.$refs.Qautocomplete.$refs.input.id) as HTMLInputElement;
      const autocomplete = new google.maps.places.Autocomplete(input);
    },

How the Q-Input element works now:

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;
}

diadal

incase you looking for v2 with vue3

const pickup = ref<QInput | null>(null);

<q-input
                          class="full-width"
                          required
                          ref="pickup"
                          type="text"
                          dense
                          label="Enter Pickup Location"
                          v-model="form.pickup"
                          
                        />

let input =  pickup.value.getNativeElement() as unknown as HTMLInputElement;
 return {
      pickup,
....
}

alexmalcova

No More Posting New Topics!

Google Places Autocomplete using Q-Input not working but works with Input