AutoComplete 自动补全

输入框自动补全组件，根据输入内容提供匹配的建议选项。

基础用法

通过 fetch-suggestions 属性传入获取建议的函数。

暂无数据

<template>
  <ZcAutoComplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入" />
</template>
<script setup>
import { ref } from 'vue'

const value = ref('')
const querySearch = (query) => {
  const results = [
    { value: 'Vue.js' },
    { value: 'React' },
    { value: 'Angular' },
    { value: 'Svelte' },
  ]
  return query
    ? results.filter((item) => item.value.toLowerCase().includes(query.toLowerCase()))
    : results
}
</script>

自定义建议项

通过作用域插槽自定义建议列表的渲染方式。

暂无数据

<template>
  <ZcAutoComplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入">
    <template #default="{ item }">
      <span style="font-weight: bold">{{ item.value }}</span>
    </template>
  </ZcAutoComplete>
</template>
<script setup>
import { ref } from 'vue'

const value = ref('')
const querySearch = (query) => {
  const results = [
    { value: 'Vue.js', label: '渐进式框架' },
    { value: 'React', label: 'UI 库' },
  ]
  return query
    ? results.filter((item) => item.value.toLowerCase().includes(query.toLowerCase()))
    : results
}
</script>

AutoComplete API

Props

参数	说明	类型	默认值
modelValue	绑定值	string	''
fetchSuggestions	获取建议列表的函数	(query: string) => Option[] | Promise<Option[]>	undefined
placeholder	占位文本	string	'请输入'
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
size	尺寸	'large' | 'medium' | 'small'	'medium'
debounce	防抖延迟(ms)	number	300
highlightFirstItem	是否高亮第一个建议项	boolean	true
noDataText	无数据提示文本	string	'暂无数据'

Events

事件名	说明	回调参数
select	选中建议项时触发	(item: AutoCompleteOption)
change	输入值变化时触发	(value: string)
focus	获取焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)

Slots

插槽名	说明
default	自定义建议项内容
prefix	输入框前缀内容
suffix	输入框后缀内容

Expose

方法名	说明	参数
focus	使输入框获取焦点
blur	使输入框失去焦点