Ant Design Select选择器 模糊查询

Select选择器  模糊查询

<Select
            showSearch
            placeholder="请选择"
            filterOption={false}
            optionFilterProp={'children'}
            loading={selectLoading1}
            onBlur={() => {
              productGetParams.title = '';
              productGetParams.page = 1;
              setProductOptions([]);
            }}
            onFocus={() => {
              getAssociatedProductsSelect({ page: 1, title: productGetParams.title });
            }}
            onSearch={(val: any) => onSearch(val, 1)}
            onPopupScroll={(e: any) => onScroll(e, 1)}
            onChange={(value: any) => {
              // props.getDetail({ id: value, type: 1 });
              setShopId(value)
            }}
          >
            {productOptions.map((item: any, index: any) => (
              <Select.Option key={index} value={item.id}>
                {item.title}
              </Select.Option>
            ))}
          </Select>

　　

  /* 是否关联商品下拉框 */

  let timeout1: any = null;

  let productGetParams = { page: 1, title: '' }; // 获取数据的分页参数和搜索的值

  const [productOptions, setProductOptions] = useState<any>([]); // 下拉框的值

  const [hasMore1, setHasMore1] = useState<any>(true); // 是否有更多数据

  const [selectLoading1, setSelectLoading1] = useState<any>(false); // 加载状态

// 数组根据属性去重
  const unique = (arr: any, u_key: any) => {
    let map = new Map();
    arr.forEach((item: any, index: any) => {
      if (!map.has(item[u_key])) {
        map.set(item[u_key], item);
      }
    });
    return [...map.values()];
  };

  //下拉框搜索
  const onSearch = (val: any, type: any) => {
    if (type == 1) {
      productGetParams.page = 1;
      setProductOptions([]);
      getAssociatedProductsSelect({ page: 1, title: val });
    }
  };

  //下拉框滚动分页
  const onScroll = (e: any, type: any) => {
    if (e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) {
      if (hasMore1 && type == 1) {
        getAssociatedProductsSelect({...productGetParams,page:productGetParams.page+1});
      }
    }
  };

  // 获取 是否关联商品 的下拉数据
  const getAssociatedProductsSelect = (params: any) => {
    if (timeout1) {
      clearTimeout(timeout1);
      timeout1 = null;
    }
    productGetParams.title = params.title;

    const fetch = () => {
      setSelectLoading1(true);
      props.dispatch({
        type: `separate/list`,
        payload: params,
        callback: (res: any) => {
          setSelectLoading1(false);
          if (productGetParams.title == params.title) {
            if (res.error === 0) {
              if (res.data.length) {
                setProductOptions((old: any) => {
                  if(params.page==1){
                    return unique([].concat(res.data), 'id');
                  }else {
                    return unique(old.concat(res.data), 'id');
                  }
                });
                if (((params.page-1) * 15+res.data.length) < res.total) {
                  setHasMore1(true);
 
                } else {
                  setHasMore1(false);
                 
                }
              }
            }
          }
        },
      });
    };

    timeout1 = setTimeout(() => {
      fetch();
    }, 500);
  };