Ant Design
Vue (a-
select) 的可
搜索输入框功能允许用户在下拉选项列表中通过输入文字进行筛选,提高选择效率。它提供了一个
包含 `
filterOption` 和 `searchInput` 属性的组件,可以自定义
搜索策略。当用户在
搜索框中输入
内容时,会触发 `
filterOption` 函数对选项进行实时
过滤。
以下是使用基本
搜索功能的一个简单示例:
```html
<template>
<a-
select v-model="
selectedValue" placeholder="请选择">
<a-
option v-for="item in
options" :key="item.value" :value="item.value" :label="item.label">
{{ item.label }}
</a-
option>
</a-
select>
</template>
<s
cript>
export default {
data() {
return {
selectedValue:
'
',
options: [
{ value:
'
option1
', label:
'选项1
' },
{ value:
'
option2
', label:
'选项2
' },
// 更多选项...
],
};
}
};
</s
cript>
```
你可以设置 `
filterOption` 属性,以便根据用户的输入动态生成匹配的结果集:
```javas
cript
filterOption({ value, search }) {
return this.
options.
filter(item => item.label.toLowerCase().includes(search.toLowerCase()));
}