Google autocomplete places with q-input



  • 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?
    Captura de pantalla de 2019-04-22 16-56-24.png

    Captura de pantalla de 2019-04-22 16-58-10.png

    Thanks!



  • 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



  • @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



  • @Mauri what solution did work for you



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


Log in to reply