feat(Search): update demo

Author: anlyyao

src/search/_example/base.tsx

@@ -1,40 +1,37 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Search } from 'tdesign-mobile-react';
 
+const list = [
+  'tdesign-vue',
+  'tdesign-react',
+  'tdesign-miniprogram',
+  'tdesign-angular',
+  'tdesign-mobile-vue',
+  'tdesign-mobile-react',
+];
+
 export default function Base() {
   const [value, setValue] = useState<string>('');
-  const onChange = (val: string) => {
-    console.log('change: ', val);
+  const [resultList, setResultList] = useState<string[]>([]);
+
+  const onChange = useCallback((val: string, context: any) => {
+    console.log('onChange: ', val, context);
     setValue(val);
-  };
-  const onBlur = () => {
-    console.log('blur');
-  };
-  const onClear = () => {
-    console.log('clear');
-  };
-  const onFocus = () => {
-    console.log('focus');
-  };
+    if (val) {
+      setResultList(list.filter((item) => item.toLowerCase().includes(val.toLowerCase())));
+    } else {
+      setResultList([]);
+    }
+  }, []);
 
-  const onSubmit = () => {
-    console.log('submit');
-  };
-  const onActionClick = () => {
-    console.log('action-click');
-  };
   return (
-    <div className="search-example">
-      <Search
-        value={value}
-        placeholder="请输入关键字"
-        onActionClick={onActionClick}
-        onBlur={onBlur}
-        onChange={onChange}
-        onClear={onClear}
-        onFocus={onFocus}
-        onSubmit={onSubmit}
-      />
+    <div>
+      <div className="search-example">
+        <Search placeholder="搜索预设文案" />
+      </div>
+      <div className="search-example">
+        <Search value={value} resultList={resultList} placeholder="输入tdesign，有预览效果" onChange={onChange} />
+      </div>
     </div>
   );
 }