javascript - autocomplete for input field in quasar V2 - Stack Overflow

admin管理员组

文章数量:1292800

How do I implement autoplete (content proposal) functionality for a text-field in quasar? Basically typing in the text-field and after a 2 characters propose according content from a webservice.

There seems to be a ponent in older versions, but I can't find reference in the current documentation:
.html

Also there is autoplete handling for q-select but nothing for q-input:
/vue-ponents/select#native-attributes-with-use-input

Using:

• Vue 3.0.0
• Quasar 2.6.0

How do I implement autoplete (content proposal) functionality for a text-field in quasar? Basically typing in the text-field and after a 2 characters propose according content from a webservice.

There seems to be a ponent in older versions, but I can't find reference in the current documentation:
https://v0-17.quasar-framework/ponents/autoplete.html

Also there is autoplete handling for q-select but nothing for q-input:
https://quasar.dev/vue-ponents/select#native-attributes-with-use-input

Using:

• Vue 3.0.0
• Quasar 2.6.0

• javascript
• vue.js
• autoplete
• vuejs3
• quasar-framework

Share Improve this question Follow asked Mar 16, 2022 at 9:58 flavio.donzeflavio.donze 8,1001010 gold badges6666 silver badges9999 bronze badges 2

• Did you end up finding anything? – Riza Khan Commented Nov 15, 2022 at 22:12
• 2 I ended up using Quasar-Select, seems like this is the remended way: quasar.dev/vue-ponents/select#filtering-and-autoplete – flavio.donze Commented Nov 21, 2022 at 13:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The official way to implement auto-plete functionality is not using the text-field QInput but the QSelect ponent.

Filtering and autoplete | Quasar Framework

QSelect Text autoplete Example:

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <q-select
        filled
        :model-value="model"
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        @input-value="setModel"
        hint="Text autoplete"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

const stringOptions = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
].reduce((acc, opt) => {
  for (let i = 1; i <= 5; i++) {
    acc.push(opt + ' ' + i)
  }
  return acc
}, [])

export default {
  setup () {
    const model = ref(null)
    const options = ref(stringOptions)

    return {
      model,
      options,

      filterFn (val, update, abort) {
        update(() => {
          const needle = val.toLocaleLowerCase()
          options.value = stringOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
        })
      },

      setModel (val) {
        model.value = val
      }
    }
  }
}
</script>

Depending on the use-case Lazy filtering might be the solution,
e.g for reading content proposal from a REST service:

QSelect Lazy filtering Example:

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md">
      <q-select
        filled
        v-model="model"
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        label="Lazy filter"
        :options="options"
        @filter="filterFn"
        @filter-abort="abortFilterFn"
        style="width: 250px"
        hint="With hide-selected and fill-input"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>

      <q-select
        filled
        v-model="model"
        use-input
        use-chips
        input-debounce="0"
        label="Lazy filter"
        :options="options"
        @filter="filterFn"
        @filter-abort="abortFilterFn"
        style="width: 250px"
        hint="With use-chips"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

const stringOptions = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]

export default {
  setup () {
    const options = ref(stringOptions)

    return {
      model: ref(null),
      options,

      filterFn (val, update, abort) {
        // call abort() at any time if you can't retrieve data somehow

        setTimeout(() => {
          update(() => {
            if (val === '') {
              options.value = stringOptions
            }
            else {
              const needle = val.toLowerCase()
              options.value = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
            }
          })
        }, 1500)
      },

      abortFilterFn () {
        // console.log('delayed filter aborted')
      }
    }
  }
}
</script>

本文标签： javascriptautocomplete for input field in quasar V2Stack Overflow