自动补全 AutoComplete

输入框的自动补全功能。

基本用法

自动补全的基础用法

---

代码事例

<template>
  <fk-auto-complete :data="data" :fieldNames="{label: 'aaa', value: 'bbb'}" allow-clear :style="{width:'360px'}" placeholder="商品衣诚" @search="handleSearch"/>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    handleSearch(value) {
      if (value) {
        // this.data = [...Array.from({length: 5})].map((_, index) => `${value}-${index}`)
        this.data = [{aaa: 'aaa', bbb: 'bbb'}];
        console.log(this.data)
      } else {
        this.data = []
      }
    }
  }
}
</script>

区分大小写

使用 strict 属性来指明在匹配时严格区分大小写。

---

代码事例

<template>
  <fk-auto-complete :data="data" :style="{width:'360px'}" placeholder="商品衣诚" strict />
</template>

<script>
export default {
  data() {
    return {
      data: ['Beijing', 'Shanghai', 'Chengdu', 'WuHan']
    }
  },
}
</script>

弹出框的页脚

自定义弹出框的页脚

---

代码事例

<template>
  <fk-auto-complete :data="data" :style="{width:'360px'}" placeholder="商品衣诚" @search="handleSearch">
    <template #footer>
      <div style="padding: 6px 0; text-align: center;">
        <fk-button>Click Me</fk-button>
      </div>
    </template>
  </fk-auto-complete>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  methods: {
    handleSearch(value) {
      if (value) {
        this.data = [...Array.from({length: 5})].map((_, index) => `${value}-${index}`)
        console.log(this.data)
      } else {
        this.data = []
      }
    }
  }
}
</script>

API

<auto-complete> Props

参数名	描述	类型	默认值	版本
model-value (v-model)	绑定值	string	-
default-value	默认值（非受控模式）	string	''
disabled	是否禁用	boolean	false
data	用于自动提示的数据	(string | number | SelectOptionData | SelectOptionGroup)[]	[]
popup-container	弹出框的挂载容器	string | HTMLElement | null | undefined	-
strict	是否为严格校验模式	boolean	false
filter-option	自定义选项过滤方法	FilterOption	true
trigger-props	trigger 组件属性	TriggerProps	-	1.0.0
allow-clear	是否允许清空输入框	boolean	false	1.0.0
virtual-list-props	传递虚拟列表属性，传入此参数以开启虚拟滚动 VirtualListProps	VirtualListProps	-	1.0.0

<auto-complete> Events

事件名	描述	参数	版本
change	绑定值发生改变时触发	value: string
search	用户搜索时触发	value: string
select	选择选项时触发	value: string
clear	用户点击清除按钮时触发	ev: Event	1.0.0
dropdown-scroll	下拉菜单发生滚动时触发	ev: Event	1.0.0
dropdown-reach-bottom	下拉菜单滚动到底部时触发	ev: Event	1.0.0

<auto-complete> Methods

方法名	描述	参数	返回值	版本
focus	使输入框获取焦点	-	-	1.0.0
blur	使输入框失去焦点	-	-	1.0.0

<auto-complete> Slots

插槽名	描述	参数	版本
option	选项内容	data: OptionInfo	1.0.0
footer	弹出框的页脚	-