zent/src/select/demos/6.custom-search.md

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

---
order: 6
zh-CN:
	title: 自定义搜索
	placeholder: 选择一项
en-US:
	title: Custom Search
	placeholder: Select an option..
---

```js
import { useState, useEffect } from 'react';
import { Select, TextMark } from 'zent';

const OPTIONS = [
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
		text: 'Option 2',
	},
	{
		key: '3',
		text: 'Option 3',
	},
	{
		key: '4',
		text: 'Option 4',
	},
	{
		key: '5',
		text: 'Option 5',
	},
	{
		key: '6',
		text: 'Option 6',
	},
	{
		key: '7',
		text: 'Option 7',
	},
	{
		key: '8',
		text: 'Option 8',
	},
	{
		key: '9',
		text: 'Option 9',
	},
];

function CustomSearch() {
	const [options, setOptions] = useState(OPTIONS);
	const [keyword, onKeywordChange] = useState('');
	const [loading, setLoading] = useState(false);
	useEffect(() => {
		setLoading(true);
		const timeout = setTimeout(() => {
			setOptions(OPTIONS.filter(it => it.text.startsWith(keyword)));
			setLoading(false);
		}, 1000);
		return () => clearTimeout(timeout);
	}, [keyword]);
	return (
		<Select
			options={options}
			keyword={keyword}
			onKeywordChange={onKeywordChange}
			placeholder="{i18n.placeholder}"
			filter={false}
			clearable
			loading={loading}
			renderOptionContent={it => <TextMark searchWords={[keyword]} textToHighlight={it.text} autoEscape />}
		/>
	);
}

ReactDOM.render(<CustomSearch />, mountNode);
```