AutoComplete 是一个输入框自动完成功能,在输入时提个建议或者辅助提示。
和 Select 的区别是:
- AutoComplete 是一个带提示的文本输入框,用户可以自由输入,关键词是辅助输入
- Select 是在限定的可选项中进行选择,关键词是选择。
使用案例如下:
<a-auto-complete
v-model.trim="form.payBankAccountNo"
class="w-full"
placeholder="付款银行账户"
allow-clear
:filter-option="filterOption"
@select="handleSelect"
>
<template slot="dataSource">
<a-select-option
v-for="item in optionsSource"
:key="item.value"
>
{{ item.name}}
</a-select-option>
</template>
</a-auto-complete>
filterOption 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。
filterOption (input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},