input 支持搜索和输入

需求：下拉搜索框+输入框

实现：用antd的组件改写

不说废话，直接上代码

    <Form.Item
        label="项目名称"
        name="wikiName"
        required
        rules={[{ required: true, message: '请选择或输入项目名称' }]}
      >
        <Select placeholder="请选择或输入项目名称" showSearch value={keyword} className="wikiName"
          onSearch={debounce(function (value) {
            // 模糊搜索获取名称
            getCompany(value)
          })}
          onChange={(val: any) => {
            // 选中下拉时，也将下拉值作为输入框的值
            setKeyword(val)
            // 绑定值到表单上
            form.setFieldsValue({ wikiName: val })
          }}
          filterOption={false} //必须加这个，否则会对返回值进行筛选
          onBlur={(e: any) => {
            // 当是选中值的时候，就没有e.target.value，所以需要通过原生获取节点的值
            // let value1 = e.target.value 
            //  ||
            let value1 = e.target.value || document.getElementsByClassName('wikiName')[0]
              ?.querySelector('.ant-select-selection-search-input')?.value
            // console.info(document.getElementsByClassName('wikiName')[0]?.querySelector('.ant-select-selection-search-input')?.value)
            // 再次设置关键词

            if (value1 === '') {
              form.setFieldsValue({ wikiName: keyword })
            } else {
              setKeyword(value1)
              form.setFieldsValue({ wikiName: value1 })
            }
            // 绑定值到表单上

          }}
        >{companyList.map((d: any) => (
          <Select.Option key={d.id} value={d.wikiName}>
            {d.symbol ? d.symbol.concat(' - ').concat(d.wikiName) : d.wikiName}
          </Select.Option>
        ))}
        </Select>

      </Form.Item>

  // 模糊搜索
  const getCompany = async (e) => {
    if (!e) {
      return false
    }
    const params = {
      wikiName: e,
      current: 1,
      size: 10,
      type: 4,
      language,
    }
    const res = await fetchRelateWikiList(params)
    setCompanyList(res.data?.records || [])
    if (res.data?.records.length === 0) {
      setKeyword(e)
    }
  }

  const [companyList, setCompanyList] = useState([]) //模糊企业搜索下拉
  const [keyword, setKeyword] = useState('') //模糊关键词

  // 防抖
  const debounce = (fn, delay = 1000) => {
    let timer: any = null
    // 闭包
    return function f(args) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        timer = null
        fn.call(this, args)
      }, delay)
    }
  }

大致思路就是上面，也可以直接用代码。

写的时候参考了一些文章，来源找不到了。