fix(auto-complete): using lodash escapeRegExp transform keyword text (#…

…2631)

* fix(auto-complete): using lodash escapeRegExp transform keyword text

* docs(auto-complete): update auto-complete custom filter example

src/auto-complete/HighlightOption.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import escapeRegExp from 'lodash/escapeRegExp';
 import useConfig from '../hooks/useConfig';
 
 export interface TdHighlightOptionProps {
@@ -15,7 +16,7 @@ const HighlightOption: React.FC<TdHighlightOptionProps> = (props) => {
   const words = useMemo<{ list: string[]; keyword?: string }>(() => {
     if (!content) return { list: [] };
     if (typeof content !== 'string' || !keyword) return { list: [content] };
-    const regExp = new RegExp(keyword, 'i');
+    const regExp = new RegExp(escapeRegExp(keyword), 'i');
     const splitKeyword = content.match(regExp)?.[0];
     return {
       list: content.split(splitKeyword),

src/auto-complete/OptionList.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState, useRef, MouseEvent, useEffect, useImperativeHandle, forwardRef } from 'react';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
+import escapeRegExp from 'lodash/escapeRegExp';
 import useConfig from '../hooks/useConfig';
 import log from '../_common/js/log';
 import { CommonClassNameType } from '../hooks/useCommonClassName';
@@ -65,7 +66,7 @@ const OptionsList = forwardRef<OptionsListRef, OptionsListProps>((props: Options
       options = options.filter((option) => props.filter(value, option));
     } else if (props.filterable) {
       // 默认过滤规则
-      const regExp = new RegExp(value, 'i');
+      const regExp = new RegExp(escapeRegExp(value), 'i');
       options = options.filter((item) => regExp.test(item.text));
     }
 

src/auto-complete/_example/filter.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Space, AutoComplete } from 'tdesign-react';
+import escapeRegExp from 'lodash/escapeRegExp';
 
 const LIST = ['第一个 AutoComplete 默认联想词', '第二个 AutoComplete 默认联想词', '第三个 AutoComplete 默认联想词'];
 
@@ -8,7 +9,7 @@ const AutoCompleteBaseFilter = () => {
   const [value2, setValue2] = useState('');
 
   function filterWords(keyword, option) {
-    const regExp = new RegExp(keyword);
+    const regExp = new RegExp(escapeRegExp(keyword));
     return regExp.test(option.text);
   }