KvcAutocomplete

オートコンプリート（入力補完機能付きドロップダウン）コンポーネントです。テキスト入力によるリアルタイムフィルタリングに対応しています。

ライブデモ

基本的な使い方

<template>
  <kvc-autocomplete
    v-model="selectedValue"
    :items="items"
  />
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { label: '東京都', value: 'tokyo' },
  { label: '大阪府', value: 'osaka' },
  { label: '愛知県', value: 'aichi' }
])

const selectedValue = ref('')
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	選択された値（v-model）
items	`Array<{label: string, value: string}>`	`[]`	オートコンプリートの項目
placeholder	`string`	`'入力してください'`	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態

イベント

イベント名	ペイロード	説明
update:modelValue	`string`	選択値が変更されたときに発火

特徴

テキスト入力によるリアルタイムフィルタリング
クリアボタン（選択値のクリア）
プレースホルダー対応
検索結果なし表示
大文字小文字を区別しない部分一致検索

使用例

基本的な使用

<template>
  <kvc-field label="都道府県">
    <kvc-autocomplete
      v-model="prefecture"
      :items="prefectures"
      placeholder="都道府県を入力または選択"
    />
  </kvc-field>
  <p>選択された都道府県: {{ prefecture }}</p>
</template>

<script setup>
import { ref } from 'vue'

const prefectures = ref([
  { label: '北海道', value: 'hokkaido' },
  { label: '青森県', value: 'aomori' },
  { label: '岩手県', value: 'iwate' },
  { label: '宮城県', value: 'miyagi' },
  { label: '秋田県', value: 'akita' },
  { label: '山形県', value: 'yamagata' },
  { label: '福島県', value: 'fukushima' },
  { label: '茨城県', value: 'ibaraki' },
  { label: '栃木県', value: 'tochigi' },
  { label: '群馬県', value: 'gunma' },
  { label: '埼玉県', value: 'saitama' },
  { label: '千葉県', value: 'chiba' },
  { label: '東京都', value: 'tokyo' },
  { label: '神奈川県', value: 'kanagawa' }
])

const prefecture = ref('')
</script>

企業名検索

<template>
  <kvc-field label="企業名">
    <kvc-autocomplete
      v-model="companyId"
      :items="companies"
      placeholder="企業名を入力"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const companies = ref([
  { label: '株式会社サンプル', value: 'company1' },
  { label: '株式会社テスト', value: 'company2' },
  { label: '株式会社デモ', value: 'company3' },
  { label: 'サンプル商事株式会社', value: 'company4' },
  { label: 'テスト工業株式会社', value: 'company5' }
])

const companyId = ref('')
</script>

ユーザー名検索

<template>
  <kvc-field label="担当者">
    <kvc-autocomplete
      v-model="assignee"
      :items="users"
      placeholder="担当者を検索"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const users = ref([
  { label: '田中太郎', value: 'user1' },
  { label: '佐藤花子', value: 'user2' },
  { label: '鈴木一郎', value: 'user3' },
  { label: '高橋美咲', value: 'user4' },
  { label: '伊藤健太', value: 'user5' }
])

const assignee = ref('')
</script>

読み取り専用

<template>
  <kvc-field label="選択済みの値">
    <kvc-autocomplete
      v-model="readOnlyValue"
      :items="items"
      :read-only="true"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { label: 'オプション1', value: 'opt1' },
  { label: 'オプション2', value: 'opt2' }
])

const readOnlyValue = ref('opt1')
</script>

TypeScript サポート

import type { KvcAutocompleteProps, AutocompleteItem } from '@zygapp/kintone-vue3-component'

const items: AutocompleteItem[] = [
  { label: 'アイテム1', value: 'item1' },
  { label: 'アイテム2', value: 'item2' }
]

const props: KvcAutocompleteProps = {
  modelValue: '',
  items: items,
  placeholder: '入力してください',
  readOnly: false,
  disabled: false
}