ant design 1.7.8 a-select组件,在右侧增加搜索图标
时间: 2023-10-07 09:14:15 浏览: 50
可以通过在 a-select 组件的 `suffixIcon` 属性中设置一个带搜索图标的自定义后缀图标来实现在右侧增加搜索图标的效果。具体代码如下:
```jsx
import { Select, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
const { Option } = Select;
function handleSearch(value) {
console.log('search:', value);
}
function CustomSelect() {
return (
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onSearch={handleSearch}
suffixIcon={<SearchOutlined />}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>
);
}
```
在上面的代码中,我们使用了 `SearchOutlined` 图标作为 `suffixIcon` 属性的值,从而在 a-select 组件的右侧增加了搜索图标。同时,我们也添加了 `showSearch` 属性和 `onSearch` 事件来实现搜索功能,当用户在输入框中输入内容时,会触发 `onSearch` 事件,并将输入的值传递给 `handleSearch` 函数进行处理。