Jquery 获取selectize.js以显示optgroup标题

我有一个包含美国城市数据的.json文件。我已成功地将数据拉入selectize选择框，但它不显示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头，在它下面显示zipcodes的三个条目。我包括了一个单独的条目奥本大学，它也应该以同样的方式显示，但只有一个zipcode

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

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']
});

目前它只输出zipcodes：

由于我指定在“显示”和“Zipcode”字段中搜索，我可以搜索Zipcode或城市，它将相应地过滤：

根据，我被引导相信提供optgroup*选项将实现我期待的目标，但显然不是这样

---

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

听起来您正在成功地将JSON文件中的数据返回到selectize函数中的选项数组，尽管我无法从您提供的代码片段中确定。我猜您缺少的是包含optgroups数据，这样组标题就会显示在您的下拉列表中

以下是一个示例，说明如何包含OptGroup以及所需的相应字段、标签和值属性：

$('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']
});

详细信息： $'inputprocplantemp'。选择{ 选项：[ {class:'哺乳动物'，值：dog，名称：dog}， {class:'哺乳动物'，值：cat，名称：cat}， {类：'哺乳动物'，值：马，名称：马}， {类别：'哺乳动物'，值：kangaroo，名称：kangaroo}， {类：'bird'，值：'duck'，名称：'duck'}， {类：'bird'，值：'chicken'，名称：'chicken'}， {类：'bird'，值：'ostrich'，名称：'ostrich'}， {类别：'bird'，值：'seagull'，名称：'seagull'}， {类：'爬行动物'，值：'蛇'，名称：'蛇'}， {类：'爬行动物'，值：'蜥蜴'，名称：'蜥蜴'}， {类：'爬行动物'，值：'鳄鱼'，名称：'鳄鱼'}， {类：'爬行动物'，值：'海龟'，名称：'海龟'} ], OPT组： [ {值：'哺乳动物'，标签：'哺乳动物'，标签_科学：'哺乳动物'}， {value:'bird'，label:'bird'，label_scientific:'Aves'}， {值：'爬行动物'，标签：'爬行动物'，标签_科学：'爬行动物'} ] , optgroupField:'类'， 拉贝尔菲尔德：“名字”， 搜索字段：['name'，'class']， 最大项目：1， 呈现：{ optgroup_头：函数数据，转义{ return+escapedata.label+“”+escapedata.label_scientific+； } } };