Ok, I think I figured this out. I had to attach a watcher to the search and run the debounce function there. @input was the wrong place apparently.

I am trying to get a function attached to an input to only run after the user has finished typing, but not sure this is the correct way to go about this. Currently I have an input that looks like this:

<q-input v-model="search" @input="showingDebounce()" ></q-input>

and script that looks like this:

import { debounce } from 'quasar'
export default {
  data () {
    return {
      search: '',
      showing: false
    }
  },
  methods: {
    showingDebounce () { debounce(function () { this.showingOn() }, 1000) },
    showingOn () { this.showing = true }
  }
}

ideally showingDebounce() should (I thought) wait for the user input to have stopped for 1000 ms, then run the showingOn() function, but nothing is happening.

Am I doing something wrong here? Thanks!

I found out what was causing the delay. My methods on the input were checking if the platform was mobile first if (!this.$q.platform.is.mobile) { this.showing = true } before setting the menu to show, and that somehow was causing a delay. If I remove that check (and instead set the value of a data item to this.$q.platform.is.mobile) I can check against that in the template itself and it now works without delay, go figure.

Well, this is only a partial fix. Unfortunately this results in a slight keyboard pause when someone is entering data in the field when it is first triggered, meaning that key stroke is not captured. Any one have any suggestions?

@wwwizzarrdry maybe try installing this plugin: https://ionicframework.com/docs/v3/native/network-interface/

There is also this: https://stackoverflow.com/questions/20194722/can-you-get-a-users-local-lan-ip-address-via-javascript

Do you mean local as in local subnet? Or the IP address it appears to be to the outside world? I just use an axios call to one of the what-is-my-ip services to return that to my app, would that work?

Not sure if this is the best way, but I did the following and it seems to work:

1. I attached @show="setFocus()" to the q-menu
2. I run my method setFocus to set the focus to the my search input field

I have an input field I am using for searches, and I have attached a menu to it with autocomplete suggestions that are pulled from an API call and update dynamically as the user types more input. This all works as expected, but I can’t figure out how to keep focus on my input as the user is typing if the menu of choices is active. Here is my template code:

<q-input v-on:keyup.enter="searchMe(search);showing = false" @input="filterFn(search);showing = true;" @click="showing = true" v-model="search" filled type="search" style="width:100%;margin-top:0;">
    <template v-slot:append>
          <q-icon name="search" @click="searchMe(search)" style="cursor:pointer;"/>
        </template>
<q-menu auto-close v-if="ACreturnoptions && showing" fit anchor="top left" self="top left" class="suggest" :offset="[0, -50]">
  <template v-for="(parent, i) in ACreturnoptions">
  <q-item-label :key="`${parent.category}-${i}`" class="q-pa-sm">{{ parent.category }}</q-item-label>
  <q-separator :key="`${parent.category}-${i}`" />
  <template v-for="(child, index) in parent.suggestions">
  <q-item clickable @click.native="searchMe(child.value);" :key="`${i}-${index}`">
    <q-item-section>{{ child.label }}<q-item-label class="mlabel">{{ child.description }}</q-item-label></q-item-section>
  </q-item>
  </template>
  </template>
</q-menu>
</q-input>

I have also tried setting the v-model on the menu to showing, and various combos of setting showing to true/false based on input or clicks in the input field.

I just want the focus to remain on the input field while the user is typing, but still show the dropdown menu of choices (and its dynamic content updating as calls are made to the api). currently when the dropdown shows, the input field loses focus.

Any suggestions?

also your switching example says to set this.$q.i18n.set(lang.default) but the quasar docs (from here: https://quasar.dev/options/quasar-language-packs) use this: this.$q.lang.set(lang.default)…I assume the quasar docs are the most up to date?