react 模糊搜索

前面文章也写过另外一种需求的模糊搜索，可以翻看找找

 起初选择框没有任何选项，当你输入内容时，选项里才出现与之匹配的内容

 

 关键在于下面这些属性：

<Select
         onSearch={this.fetchOrgName}   // onSearch搜索方法
         onChange={(value) => {this.handleChange(value)}}  // onChange对搜索出来的下拉选项进行选择的方法
        notFoundContent={this.state.loading ? <Spin siza="small" /> : null}  // notFoundContent当下拉列表为空时显示的内容
        filterOption={false}    // filterOption：让搜索出来的内容显示列表
        defaultActiveFirstOption={false}     // 是否默认高亮第一个选项，false不
        showSearch  // 使下拉选项有搜索的功能
        style={{ width: '100%' }}     // 控制输入框的长度                                     
        placeholder="请输入律所名称" 
        allowClear  // 输入框的尾部有个小叉号可以清除输入框的内容  ‘x’
>
</Select>

 其中用到了延迟，优化，设置当输入停顿0.8秒后才调接口，避免输入一个调一个接口

import React from 'react'
import { connect } from 'apollo'
import request from 'utils/request'
import { Form, Row, Col, Card, message, Button } from 'antd'
 
const FormItem = Form.Item
let timeOut
const timeDebounce = 800


class UpdateLawyerView extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,
            searchData: '',  // 存输入框输入的内容
            selectList: [], // 模糊搜索出来的律所列表
            data: {}, // 选中的律所信息
            onBlurFlag: true,  // 
        }
    }

    // 获取律所信息，根据入参模糊查询是否存在相匹配的律所信息，返回所匹配的律所列表
     fetchOrgName = (value) => {
        if(timeOut){
            clearTimeOut(timeOut)
            timeOut = null
        }
        const fake = () => {
            if(value && value !== '') {
                this.setState({
                    loading: true,
                    searchData: value,
                })
            } else {
                this.setState({
                    loading: false,
                })
            }
            request({
                url: '/lst/api/orgsFuzzyQuery',
                method: 'post',
                data: { search: value },
            }).then((res) => {
                if(res.resultStatus === 'SUCCESS' && res.data && res.data.length > 0){
                   this.setState({
                        loading: true,
                        selectList: res.data,
                    }) 
                } else {
                    this.setState({
                        loading: false,
                        selectList: [],
                    })
                }
            })
        }
        timeOut = setTimeOut(fake, timeDebounce )
     }
    
     // 根据入参查询返回的律所列表有值时，点击律所列表信息查询律所列表联系人相关信息
    handleChange = (value) => {
        this.props.form.resetFields()
        request({
                url: `/lst/api/organization/$(value)`,
                method: 'get',
                data: { nums: new Date().getTime() },
        }).then((res) => {
            if(res.data && res.data.organization){
                this.setState({
                    loading: false,
                    data: res.data.organization,
                })
            }
        })
    }

     // 提交
    submit = () => {
        this.props.form.validateFields((error, values) => {
        const { data } = this.state
            if(!error){
                values.oldOrgName = data.orgName
                values.id = data.id
                this.props.modifyOrgName(values)
            }
        })
    }
 
    // 重置
    reset = () => {
        this.props.form.resetFields()
    }
 
    render () {
        const { getFieldDecorator } = this.props.form
 
    return (
 
        <div>
          <Card title="14.修改律所名称">
            <Form>
              <Row>
                <Col span={10}>
                  <FormItem label="旧律所名称">
                    {getFieldDecorator('oldOrgName', {
                      rules: [
                        {
                          required: true,
                          message: '请输入旧律所名称'
                        },
                      ],
                    })( 
                        <Select
                            onSearch={this.fetchOrgName}
                            onChange={(value) => {this.handleChange(value)}}
                            notFoundContent={this.state.loading ? <Spin siza="small" /> : null}
                            filterOption={false}
                            defaultActiveFirstOption={false}
                            showSearch
                            style={{ width: '100%' }}                                         
                            placeholder="请输入律所名称" 
                            allowClear 
                        >
                        </Select>
                    )}
                  </FormItem>
                </Col>
                <Col span={10}>
                  <FormItem label="新律所名称">
                    {getFieldDecorator('newOrgName', {
                      rules: [
                        {
                          required: true,
                          message: '请输入新律所名称'
                        },
                        {
                          validator: newLawyerId,
                        },
                      ],
                    })( <Input placeholder="请输入律所名称" allowClear /> )}
                </FormItem>
            </Col>
            <Col span={4}>
                <div>
                    <Button type="primary" onClick={this.submit}>提交</Button>
                    <Button type="primary" onClick={this.reset}>重置</Button>
                </div>
            </Col>
           </Row>
         </Form>
       </Card>
    </div>
    )
  }
}
 
const mapStateToProps = ({ commonlyUsedFunctions }) => ({ ...commonlyUsedFunctions })
const mapDospatchToProps = dispatch => ({
    modifyOrgName(values){
        dispatch({
            type: 'commonlyUsedFunctions/modifyOrgName',
            payload: {
                values,
            },
            async: true,
        })
    }
})
 
export default connect(mapStateToProps, mapStateToProps)(Form.create()(UpdateLawyerView ))