有关创建选择框或下拉菜单的建议

Question

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

Answer 1

您可以为此使用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

Answer 2

在使用react时，您可以使用一些内置库来作为您的救赎者。可能您正在寻找类似react-select的东西。请访问他们的git中心页面，并按照他们的说明进行操作。 这是给您的示例

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