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

49 lines
1.0 KiB
Markdown
Raw Normal View History

2018-02-26 10:44:06 +00:00
<cn>
#### 带搜索框
展开后可对选项进行搜索。
</cn>
<us>
#### Select with search field
Search the options while expanded.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-02-26 10:44:06 +00:00
<template>
<a-select
showSearch
placeholder="Select a person"
optionFilterProp="children"
style="width: 200px"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange"
:filterOption="filterOption"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="tom">Tom</a-select-option>
</a-select>
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
methods: {
handleChange(value) {
console.log(`selected ${value}`);
},
handleBlur() {
console.log('blur');
},
handleFocus() {
console.log('focus');
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
2018-02-26 10:44:06 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-02-26 10:44:06 +00:00
</script>
```