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

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

它是用React构建的，所以请不要提供任何类似select2的jQuery解决方案。我已经尝试过，语义UI选择和其他一些。现在我正试图解决这个模块的问题

最终的结果非常像默认的谷歌搜索提示，你写下，请求被提出，选项出现在搜索栏下面。

---

任何帮助都将不胜感激

这里的multiselect选项似乎可以满足您的需要：

---

但是，如果您想要真正适合您的需要的东西，为什么不创建自己的多选下拉列表？

您可以展示您的代码，并澄清您到底需要什么帮助吗？是的，已经有了！在使用react select的情况下，由于redux的操作顺序，修改后的数据对组件不可用。数据在组件呈现后立即从react传递，因此它没有获取数据的选项。不确定此“操作顺序”问题。当api中的数据到达时，您应该能够触发重新渲染。我自己修复了它，将在接下来的一个小时左右添加解决方案。谢谢你的时间：你已经试过了，可惜没有帮助。时间短是唯一的原因。当然，但它似乎完全符合您的要求，所以您可能需要澄清为什么它不起作用，以便有人可以帮助您？当然，现在将添加一些代码。React select具有非常严格的数据结构要求，与我从api获得的数据不兼容。当我试图修改客户端上接收到的数据时，会出现操作顺序问题。

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);