Quasarでフィールドに入力した値から候補を補完する方法

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 参考サイト

概要

select + filter を使うことで入力した値から候補を絞り込むことができます

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <q-select
        filled
        v-model="model"
        use-input
        fill-input
        hide-selected
        clearable
        :options="options"
        @filter="filterFn"
        hint="Basic filtering"
        style="width: 250px;"
      >
        <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>
  <div class="q-pa-md">
    <q-btn
     label="Search"
     @click="search()"
    >
    </q-btn>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

const options = ref(null)
const model = ref(null)

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

const search = () => {
  console.log(model.value);
}
</script>

ちょっと解説

q-select の options と filterFn が重要です
options は q-select の候補となる一覧を設定するためのリアクティブモデルです

filterFn は入力のたびに update が呼び出されます
update では入力された値を小文字に変換し入力された値とオプションの文字列を比較します
入力された値がオプション内に含まれている場合はそれを残し再度 options に設定することで入力の候補を絞り込んでいます

q-select で選択された値は v-model で設定した model リアクティブオブジェクトにに入っているのでその値を Search では表示しています

参考サイト

• https://quasar.dev/vue-components/select