docs: update select remote search demo

content/input/select/index-en-US.md

@@ -589,83 +589,62 @@ A multi-select example with remote search, request debounce, loading status.
 
 ```jsx live=true
 import React from 'react';
-import { Select } from '@douyinfe/semi-ui';
 import { debounce } from 'lodash-es';
+import { Select } from '@douyinfe/semi-ui';
 
-class SearchDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            Loading: false,
-            optionList: [
-                { value: 'abc', label: 'Semi', type: 1 },
-                { value: 'capcut', label: 'Capcut', type: 2 },
-                { value: 'xigua', label: 'BuzzVideo', type: 4 },
-            ],
-            value: '',
-            multipleValue: [],
-        };
-        this.handleSearch = debounce(this.handleSearch, 800).bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onMultipleChange = this.onMultipleChange.bind(this);
-    }
-
-    handleSearch(inputValue) {
-        this.setState({ loading: true });
-        let length = Math.ceil(Math.random() * 100);
-        let result = Array.from({ length }, (v, i) => {
-            return { value: inputValue + i, label: inputValue + '-new line-' + i, type: i + 1 };
-        });
-        setTimeout(() => {
-            this.setState({ optionList: result, loading: false });
-        }, 2000);
-    }
-
-    onChange(value) {
-        this.setState({ value });
-    }
+() => {
+    const [loading, setLoading] = useState(false);
+    const optionList = [
+        { value: 'dsm', label: 'Semi DSM', type: 1 },
+        { value: 'd2c', label: 'Semi DesignToCode', type: 2 },
+        { value: 'c2d', label: 'Semi CodeToDesign', type: 3 },
+        { value: 'plugin', label: 'Semi Plugin', type: 4 },
+    ];
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+    
+    const handleMultipleChange = (newValue) => {
+        setValue(newValue);
+    };
 
-    onMultipleChange(multipleValue) {
-        this.setState({ multipleValue });
-    }
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        let result = [];
+        if (inputValue) {
+            let length = Math.ceil(Math.random()*100);
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `Relative: ${inputValue}${i}`, type: i + 1 };
+            });
+            setTimeout(() => {
+                setLoading(false);
+                setList(result);
+            }, 1000);
+        } else {
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `Random: ${i}`, type: i + 1 };
+            });
+        }
+    };
 
-    render() {
-        const { loading, optionList, value, multipleValue } = this.state;
-        return (
-            <div>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onChange}
-                    value={value}
-                    emptyContent={null}
-                ></Select>
-                <br />
-                <br />
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    multiple
-                    value={multipleValue}
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onMultipleChange}
-                    placeholder="Multiple Select"
-                    emptyContent={null}
-                ></Select>
-            </div>
-        );
-    }
-}
+    return (
+        <Select
+            style={{ width: 300 }}
+            filter
+            remote
+            onChangeWithObject
+            multiple
+            value={value}
+            onSearch={debounce(handleSearch, 1000)}
+            optionList={list}
+            loading={loading}
+            onChange={handleMultipleChange}
+            emptyContent={null}
+        >
+        </Select>
+    );
+};
 ```
+
 ### Custom search strategy
 
 By default, the user's search input will be compared with the option's label value as a string include.  

content/input/select/index.md

@@ -639,88 +639,62 @@ import { Select } from '@douyinfe/semi-ui';
 通过动态更新`optionList`更新下拉菜单中的备选项  
 使用受控的 value 属性
 
-```jsx live=true hideInDSM
+```jsx live=true
 import React from 'react';
 import { debounce } from 'lodash-es';
 import { Select } from '@douyinfe/semi-ui';
 
-class SearchDemo extends React.Component {
-    constructor(){
-        super();
-        this.state = {
-            loading: false,
-            optionList: [
-                { value: 'abc', label: '抖音', type: 1 },
-                { value: 'hotsoon', label: '火山小视频', type: 2 },
-                { value: 'jianying', label: '剪映', type: 3 },
-                { value: 'toutiao', label: '今日头条', type: 4 },
-            ],
-            value: '',
-            multipleValue: [],
-        };
-        this.handleSearch = debounce(this.handleSearch, 800).bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onMultipleChange = this.onMultipleChange.bind(this);
-    }
-
-    handleSearch(inputValue) {
-        this.setState({ loading: true });
-        let length = Math.ceil(Math.random()*100);
-        let result = Array.from({ length }, (v, i) => {
-            return { value: inputValue + i, label: inputValue + '-新业务线-' + i, type: i + 1 };
-        });
-        setTimeout(() => {
-            this.setState({ optionList: result, loading: false });
-        }, 2000);
-    }
-
-    onChange(value) {
-        this.setState({ value });
-    }
-
-    onMultipleChange(multipleValue) {
-        this.setState({ multipleValue });
-    }
+() => {
+    const [loading, setLoading] = useState(false);
+    const optionList = [
+        { value: 'douyin', label: '抖音', type: 1 },
+        { value: 'xingtu', label: '醒图', type: 2 },
+        { value: 'jianying', label: '剪映', type: 3 },
+        { value: 'toutiao', label: '今日头条', type: 4 },
+    ];
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+    
+    const handleMultipleChange = (newValue) => {
+        setValue(newValue);
+    };
 
-    render() {
-        const { loading, optionList, value, multipleValue } = this.state;
-        return (
-            <div>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onChange}
-                    value={value}
-                    placeholder='请选择'
-                    emptyContent={null}
-                >
-                </Select>
-                <br/><br/>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    multiple
-                    value={multipleValue}
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onMultipleChange}
-                    placeholder='请选择'
-                    emptyContent={null}
-                >
-                </Select>
-            </div>
-        );
-    }
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        let result = [];
+        if (inputValue) {
+            let length = Math.ceil(Math.random()*100);
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `相近业务 ${inputValue}${i}`, type: i + 1 };
+            });
+            setTimeout(() => {
+                setLoading(false);
+                setList(result);
+            }, 1000);
+        } else {
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `随机业务${i}`, type: i + 1 };
+            });
+        }
+    };
 
-}
+    return (
+        <Select
+            style={{ width: 300 }}
+            filter
+            remote
+            onChangeWithObject
+            multiple
+            value={value}
+            onSearch={debounce(handleSearch, 1000)}
+            optionList={list}
+            loading={loading}
+            onChange={handleMultipleChange}
+            emptyContent={null}
+        >
+        </Select>
+    );
+};
 ```
 
 ### 自定义搜索逻辑