获取 selectize.js 以显示 optgroup 标头

Question

我有一个包含美国城市数据的 .json 文件。我已成功将数据拉入我的选择框，但它不显示 optgroup 标题。以下是 .json 文件的摘录：

[
    [...],
    [{
        "Index": 16246,
        "Display": "Auburn",
        "City": "Auburn",
        "County": "Lee",
        "State": "Alabama",
        "StateAbbv": "AL",
        "Latitude": 32.5475,
        "Longitute": -85.4682,
        "Zipcode": 36830
    }, {
        "Index": 16247,
        "Display": "Auburn",
        "City": "Auburn",
        "County": "Lee",
        "State": "Alabama",
        "StateAbbv": "AL",
        "Latitude": 32.5782,
        "Longitute": -85.349,
        "Zipcode": 36831
    }, {
        "Index": 16248,
        "Display": "Auburn",
        "City": "Auburn",
        "County": "Lee",
        "State": "Alabama",
        "StateAbbv": "AL",
        "Latitude": 32.592,
        "Longitute": -85.5189,
        "Zipcode": 36832
    }],
    [{
        "Index": 16249,
        "Display": "Auburn University",
        "City": "AuburnUniversity",
        "County": "Lee",
        "State": "Alabama",
        "StateAbbv": "AL",
        "Latitude": 32.6024,
        "Longitute": -85.4873,
        "Zipcode": 36849
    }],
[...]
]

如您所见，Auburn 有三个条目，所以我希望“Auburn”成为 optgroup 标题，三个条目（显示邮政编码）位于其下方。我包括了一个单数条目（奥本大学），它也应该以相同的方式显示，但只有一个邮政编码。

这基本上是我在下拉列表中寻找的格式：

AUBURN
  36380
  36831
  36832
AUBURN UNIVERSITY
  36849

这是我在页面上设置的插件配置：

$select_city = $('#zipcode-select').selectize({
    optgroupField: 'Display',
    optgroupLabelField: 'Display',
    optgroupValueField: 'Index',
    maxItems: zipcodeLimit,
    valueField: 'Zipcode',
    labelField: 'Zipcode',
    searchField: ['Zipcode','Display']
});

目前它只输出邮政编码：

由于我指定在“显示”和“邮政编码”字段中进行搜索，因此我可以搜索邮政编码或城市，它会相应地进行过滤：

根据plugin's usage page，我被引导相信提供optgroup* 选项可以实现我想要做的事情，但显然事实并非如此。

有人知道如何实现我想要做的事情吗？

Answer 1

听起来您已成功地将 JSON 文件中的数据返回到 selectize 函数中的 options 数组（尽管我无法从您提供的代码 sn-p 中确定）。我猜您缺少的是包含optgroups 数据，以便组标题将显示在您的下拉列表中。

以下是如何包含optgroups 以及您需要的相应字段、标签和值属性的示例：

$('select-id').selectize({
  // this is where you are returning the data from your JSON file
  options: [
    {itemGroup: 'Group A', itemValue: '1', itemName: 'Item 1'},
    {itemGroup: 'Group A', itemValue: '2', itemName: 'Item 2'},
    {itemGroup: 'Group B', itemValue: '3', itemName: 'Item 3'},
    {itemGroup: 'Group B', itemValue: '4', itemName: 'Item 4'}
  ],
  // this is the data that I think you are probably missing
  optgroups: [
    {groupName: 'Group A'},
    {groupName: 'Group B'}
  ],
  optgroupField: 'itemGroup', // refers to the group field in "options"
  optgroupLabelField: 'groupName', // refers to the label field in "optgroups"
  optgroupValueField: 'groupName', // refers to the value field in "optgroups"
  valueField: 'itemValue',
  labelField: 'itemName',
  searchField: ['itemGroup', 'itemName']
});

Answer 2

详细信息：https://github.com/selectize/selectize.js/blob/master/examples/optgroups.html

  $('#inputprocplantemp').selectize({
                options: [
                    { class: 'mammal', value: "dog", name: "Dog" },
                    { class: 'mammal', value: "cat", name: "Cat" },
                    { class: 'mammal', value: "horse", name: "Horse" },
                    { class: 'mammal', value: "kangaroo", name: "Kangaroo" },
                    { class: 'bird', value: 'duck', name: 'Duck' },
                    { class: 'bird', value: 'chicken', name: 'Chicken' },
                    { class: 'bird', value: 'ostrich', name: 'Ostrich' },
                    { class: 'bird', value: 'seagull', name: 'Seagull' },
                    { class: 'reptile', value: 'snake', name: 'Snake' },
                    { class: 'reptile', value: 'lizard', name: 'Lizard' },
                    { class: 'reptile', value: 'alligator', name: 'Alligator' },
                    { class: 'reptile', value: 'turtle', name: 'Turtle' }
                ],
                optgroups:
                    [
                       { value: 'mammal', label: 'Mammal', label_scientific: 'Mammalia' },
                       { value: 'bird', label: 'Bird', label_scientific: 'Aves' },
                       { value: 'reptile', label: 'Reptile', label_scientific: 'Reptilia' }
                    ]
                ,
                optgroupField: 'class',
                labelField: 'name',
                searchField: ['name', 'class'],
                maxItems:1,
                render: {
                    optgroup_header: function (data, escape) {
                        return '<div class="optgroup-header">' + escape(data.label) + ' <span class="scientific">' + escape(data.label_scientific) + '</span></div>';
                    }
                }
        });