Question

要构建这样的结构，我需要一个输入，用户可以在其中输入每次更改并动态发出请求，在单击任何选项时，其响应将显示在下面的下拉选项中。选项中，下拉菜单必须关闭。

它是用React构建的，因此请不要提供诸如select2之类的jQuery解决方案。我已经尝试过 react-select，语义UI选择和其他一些功能。现在，我正在尝试使用此模块https://www.npmjs.com/package/react-select-search

解决问题

class Search extends Component {
    constructor(props){
        super(props);

        this.changeHandler = this.changeHandler.bind(this);
        this.loadHandle = this.loadHandle.bind(this);
    }

    changeHandler(e){
        let value = e.target.value;
        this.props.setName(value);
        if (value.length <= 1) return;
        axios.get(`https://somelink.com`)
        .then(res => {
            this.props.onGet(res);
        })
    }

    loadHandle(){
        const tourList = this.props.state.tourList;
        return tourList === undefined || tourList.length === 0;
    }

    render() {
        return (
            <React.Fragment>
                <div className="card card-body mb-4 p-4 mt-3">
                    <h1 className="display-4 text-center">
                        Search a Tournament
                    </h1>
                    <div className="form-group">
                        {/* <input type="text" minLength={2} name="tourTitle" value={this.props.state.name || ''} onChange={this.changeHandler} placeholder="Write here..." className="form-control form-control-lg"/> */}
                        <ReactSelect onChange={this.changeHandler} placeholder="Write here..." options={this.props.state.tourList} isLoading={this.loadHandle}/>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}


function mapStateToProps(state){
    return {
        state
    };
}

function mapDispatchToProps(dispatch){
    return {
        setName: tourName => {
            dispatch({
                type: SET_NAME,
                name: tourName
            })
        },
        onGet: res => {
            if (res.data.length === 0) {
                dispatch({
                    type: SEARCH_TOURNAMENTS,
                    tourList: 'empty'
                })
            } else {
                dispatch({
                    type: SEARCH_TOURNAMENTS,
                    tourList: res.data[0].documents
                });
            }
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Search);

最终结果非常类似于您编写的默认Google搜索提示，发出请求，并且选项显示在搜索栏下方。任何帮助将不胜感激！

Answer 1

这里的multiselect选项似乎可以满足您的要求：https://jedwatson.github.io/react-select/

但是，如果您想真正满足自己的需求，为什么不创建自己的多选下拉列表呢？

带有下拉菜单的可搜索输入

1 个答案: