创建选择框或下拉菜单的建议答案

【问题标题】：Suggestions for creating a select box or dropdown创建选择框或下拉菜单的建议
【发布时间】：2019-05-08 00:28:02
【问题描述】：

我想为项目创建一个下拉列表。但 Item 表有超过 200K 行。所以我想在下拉列表中显示大约 50 行，其余的可以从下拉列表中的搜索选项中检索。有人可以建议实现这一点的最佳方法是什么。

【问题讨论】：

使用库（如 Select2）搜索可用选项，但请确保在服务器端执行过滤逻辑。

标签： javascript jquery reactjs promise dropdown

【解决方案1】：

当您使用 react 时，您可以使用一些内置库来作为您的救赎者。可能您正在寻找类似react-select 的东西。去访问他们的 git hub 页面并按照他们的说明简单地实现它。这是给你的一些例子

import React,{Component} from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }];

export default class test extends Component {
state = {
    selectedOption: null,
};
handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
};
render() {
    const { selectedOption } = this.state;

    return (
        <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
        />
    );
}

【讨论】：

【解决方案2】：

您可以为此使用 jQueryUI 小部件。它没有任何参数将您的项目限制为 50。但是您可以尝试此代码

$("#your_element").autocomplete({ 
    source: function(request, response){
        var items = $.ui.autocomplete.filter(your_data_source, request.term);
        response(items.slice(0, 50));
    }
});

Check this link: Autocomplete widget of jQueryUI

【讨论】：