使用antd下拉框远程搜索（模糊查询）

html

<Form.Item label="客户姓名" name="customerId" rules={[{ required: true, message: '请选择客户姓名' }]}>
     <Select placeholder="请选择客户姓名" getPopupContainer={trigger => trigger.parentNode} onChange={onCustomerChange}
       showSearch
       onSearch={onSearch}
       optionFilterProp="children"
       filterOption={(input, option: any) =>
         option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
       }
     >
       {
         customerList.length > 0 ? customerList.map(item => {
           return (
             <Option value={item.customerId} key={item.customerId}>{item.namePhone}</Option>
           )
         }) : null
       }
     </Select>
</Form.Item>

js

    //客户列表
  const customersList = (val) => {
    service.customersList(val).then((res: any) => {
      if (res.success) {
        setcustomerList(res.data)
      } else {
        message.error(res.errorMsg)
      }
    })
  }
  
  //客户模糊搜索
  const onSearch = (val) => {
    customersList({ customerName: val })
  }

做数据回显时，先用后端返回的name查询列表

//详情
  const etail = () => {
    service.detail({ id: props.id }).then((res: any) => {
      if (res.success) {
      //根据后端返回紫貂查询客户信息列表
        const phone = getStr(res.data.customer!.customerPhone)
        customersList({ customerName: phone })
       
        //修改页面字段回显
        form.setFieldsValue({
          //客户信息
          ...res.data.customer
        })

        setspinning(false)
      } 
    }).catch(e => { console.log(e) })
  }