今回は、Vuetify3のv-autocompleteについて記します。
v-autocompleteは、検索エンジンの入力フィールドのようなものです。
用意されたデータセットから検索したり、
APIにより、動的に候補を出すことができます。
通常の使い方は、
①v-autocomplelteに表示された候補をクリック
②入力フィールドにクリックした候補が入る
③検索ボタンで検索
といったあくまで、補完的な役割を果たしています。
しかし、検索エンジンのGoogle等、候補をクリックすると検索をします。
つまり候補をクリックした時、補完ではなく検索し、画面遷移や検索を開始します。
今回は、これを実現する方法について記します。
v-autocomplete で候補をクリックで検索や画面遷移する方法
環境
- vue 3.2.13
-
vuetify 3.1.4
コード
以下の通りです。
<template>
<v-app>
<v-autocomplete
v-model="select"
v-model:search="search"
:items="userObject"
item-title="userName"
label="入力ヒント">
</v-autocomplete>
</v-app>
</template>
<script setup>
import {
ref,
watch
} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
const select = ref();
const search = ref();
const userObject = ref();
watch(select,(userName) => {
router.push(
{
name: 'profile',
params: { username: userName }
});
});
watch(search,(userNameComplement) => {
userObjectUpdate(userNameComplement);
})
const userObjectUpdate = async(userNameComplement) => {
let params = new URLSearchParams();
params.append('userNameComplement', userNameComplement);
await axios.post('url',params)
.then(async(res)=>{
userObject.value = await res;
});
}
</script>
では、細かくみていきます。
v-model=”select”は、入力フィールドに入っている値です。
これはリアクティブなため、変化があるたびに値も書き変わります。
v-model:search=”search”は、入力フィールドに入力するたびに
値が変わります。
そのため、v-modelとv-model:searchでは着火タイミングが異なります。
:items=”userObject”は、候補として表示するためのデータセットです。
item-titleは、「:items」で表示したい値のキーを指定しています。
<v-autocomplete v-model="select" v-model:search="search" :items="userObject" item-title="userName" label="入力ヒント"> </v-autocomplete>
次に、機能のインポートと定数を定義します。
初期値は入れていません。
import
{ ref, watch }
from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
const select = ref();
const search = ref();
const userObject = ref();
監視プロパティのwatchを使用して、
selectの値を監視します。
下記の例だと、
候補クリック時に遷移します。
watch(
select,(userName) => {
router.push( {
name: 'profile',
params: { username: userName }
});
});
同じく監視プロパティのwatchを使用して、
searchの値を監視します、
searchは、ユーザが入力フィールドに文字を追加するたび、値が変化します。
そして、下記の例では、search変更のたび、userObjectUpdateにuserNameComplement(入力文字）を引数として実行されます。
watch(
search,(userNameComplement) => {
userObjectUpdate(userNameComplement);
})
);
上記で実行されたwatch内にあるuserObjectUpdateの処理です。
非同期でサーバサイドへHTTPリクエストを送信します。
例ですが、入力された文字列をサーバサイド送信し、
LIKE,、LIMIT、OFSET句で候補の値をいくつか取得します。
それらをuserObjectに代入します。(refで定義したリアクティブな変数のため
valueに値を加えます。）
const userObjectUpdate =
async(userNameComplement) => {
let params = new URLSearchParams();
params.append('userNameComplement', userNameComplement);
await axios.post('url',params).then(
async(res)=>{
userObject.value = await res;
});
}
userObjectの例です。
item-titleにuserNameを入れていることから、
検索は、userNameでかかります。
{
userName:aaa,
userDisplayName:太郎
},
{
userName:abb,
userDisplayName:花子
},
{
userName:ccc,
userDisplayName:二郎
}
入力フィールドが空の場合、
フィールドにフォーカスを当てると、
「aaa」,「abb」、「ccc」が候補で表示されます。
※表示指定数による。
フィールドに、「a」と入力すると
「aaa」,「abb」と表示されます。
このような形で候補をクリックで検索や画面遷移の実装が可能です。
おわりに
イマドキっぽい実装ができました。
Vuetifyのドキュメントを調べると入力フィールドに設定できるアニメーションやアイコンも豊富にあります。
また、APIやオプション、プロパティなども多くあるためぜひ、活用してみてください。
以上です。
コメント