ant-design-vue/components/select/demo/combobox.md

42 lines
1.0 KiB
Markdown
Raw Normal View History

2018-02-25 08:48:19 +00:00
<cn>
#### 智能提示
输入框自动完成功能,下面是一个账号注册表单的例子。
2018-04-07 11:10:34 +00:00
推荐使用 [AutoComplete](/ant-design/components/auto-complete-cn/) 组件。
2018-02-25 08:48:19 +00:00
</cn>
<us>
#### Automatic completion
Automatic completion of select input.
2018-04-07 11:10:34 +00:00
Using the [AutoComplete](/ant-design/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
2018-02-25 08:48:19 +00:00
</us>
```html
<template>
<a-select mode="combobox" style="width: 200px" @change="handleChange" :filterOption="false"
placeholder="Enter the account name">
<a-select-option v-for="opt in options" :key="opt">{{opt}}</a-select-option>
</a-select>
</template>
<script>
const domains = ['gmail.com', '163.com', 'qq.com']
export default {
data() {
return {
options: [],
}
},
methods: {
handleChange(value) {
if (!value || value.indexOf('@') >= 0) {
this.options = [];
} else {
this.options = domains.map(domain => `${value}@${domain}`)
}
}
}
}
</script>
```