zent/src/select/demos/5.filter.md

一套前端设计语言和基于React的实现

---
order: 5
zh-CN:
	title: 筛选
	builtin: 内置默认筛选
	nofilter: 禁用内置筛选
	customer: 自定义筛选
en-US:
	title: Filter
	builtin: Built-in filter is enabled by default
	nofilter: Disable built-in filter
	customer: Customer filter
---

```js
import { Select } from 'zent';

const options = [
	{
		key: 'group-1',
		text: 'Group 1',
		type: 'header',
	},
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
		text: 'Option 2',
	},
	{
		key: 'group-2',
		text: 'Group 2',
		type: 'header',
	},
	{
		key: '3',
		text: 'Option 3',
	},
];

function escapeRegExp(string) {
	// $& means the whole matched string
	return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function customerFilter(keyword, option) {
	return new RegExp(escapeRegExp(keyword), 'i').test(option.text);
}

ReactDOM.render(
	<div className="zent-demo-select-filter">
		<Select clearable options={options} placeholder="{i18n.builtin}" />
		<Select clearable options={options} placeholder="{i18n.nofilter}" filter={false} />
		<Select
			clearable
			options={options}
			placeholder="{i18n.customer}"
			filter={customerFilter}
		/>
	</div>,
	mountNode
);
```

<style>
	.zent-demo-select-filter > * {
		margin-bottom: 10px;
	}
</style>