AutoComplute制作模糊搜索

1. 引入React, useState classnames插件，引出Option

import React, { useState } from 'react';
import cxs from 'classnames'
import { AutoComplete } from 'antd';
import './dimserch.css'
const { Option } = AutoComplete

思路 ：

将一份数据存两遍，一份用于渲染，一份用于查找。

由于传入的 搜索值(serch)或是 变化值(onChange)的值若是空字符串，那么只需在另一份保存的数据中查找就可以了；

filter，用list.filter( item => {
   // 第一种写法  1
    if(item.includes.val) return true
   // 若item包含传入值，返回此对象
    
  //第二种写法   2
  // const regex = new RegExp(val)
  // if(regex.test(item)) return true
  return false 其他情况不返回！
})

完整代码：

function DimSerch() {
  const list =
    [
      "双皮奶", "狮子头", "擀面皮", "巧克力蛋糕", 
        "热米皮", "牛肉面", "二细牛肉面", "三细牛肉面",
      "扬州炒饭", "蛋炒饭", "蛋炒土豆丝", "巧克力饼",
        "狮子头拌奶酪", "火腿擀面皮", "加量擀面皮",
      "热米皮拌青椒", "双皮奶加量", "海之言", "蓝色海之言", 
        "紫色海之言", "橘黄海之言", "绿色海之言",
      "百吉猫锅巴", "三元锅巴", "酥锅巴", "AD钙", "乳酸菌AD钙", 
        "草莓AD钙", "香辣火腿肠", "玉米火腿肠"
    ]
  const [realyDatas, setRealyDatas] = useState(list)
  const [originList, setoriginList] = useState(list)

  const handleSearch = (val) => {
    // const regex = new RegExp(val)  // 定义规则(传入值);若val是空字符串，
                                      // 那么所有被检验元素都包含''，
       /**
         *** 注意： 在使用正则regex.test(item)有时会在搜索框 的值包含()，
         删去一个时报错，提示不是有效的正则，而includes不会报这个错。
      */      
      // 也就是说，此时返回被遍历对象的所有（每一项）;
    let newArray = originList.filter((item) => {
      // if (regex.test(item)) {      // 若每一项包含所定义规则；所有字符都包含空字符串；
      //   return true                // 就返回这个对象
      // }
      if(item.includes(val)) return true // item包含输入的值，返回此对象；其他情况false不返回
      return false
    })
    setRealyDatas(newArray)          // 更新渲染数组； 重新渲染
  }
  
  const autoChange = (val) => { // 关于是否只需要一个这样的函数，待定
    // const regex = new RegExp(val)
    let newArray = originList.filter((item) => {
      // if (regex.test(item)) {
      //   return true
      // }
      if(item.includes(val)) return true
      return false
    })
    setRealyDatas(newArray)
  }
  return (
    <div id='wrap'>
      <AutoComplete
        getPopupContainer={() => document.getElementById("wrap")}
        onSearch={handleSearch}
        onChange={autoChange}
        placeholder="请输入"
      >
       /**
          在渲染时如果数据量过大，搜索框会出现卡顿
          因此不能直接渲染全部数据
          
          补充：这里截取数组 为什么使用了slice 而不是 splice?
          splice操作原数组，而slice不会操作原数组，使用splice 数据会自动删，
          如果有2003条数据，那么最后只会剩下3条数据！
          原因： 一份数据存了两份，操作一份数据会影响另一份数据！这是浅拷贝的问题，
          slice不影响原数组，所以数据不会变少。在多数情况下，建议不要操作原数据。
       */
        {(realyDatas.length >= 30 
          ? realyDatas.slice(1,30) 
          : realyDatas).map((item, index) => (
          <Option value={item} key={item}>
            {item}
          </Option>
        ))}
      </AutoComplete>
    </div>
  )
}

export default DimSerch