Get selectize.js to show optgroup headers

Question

I have a .json file containing US city data. I have successfully pulled the data into my selectize select box, but it does not display the optgroup headers. Here is an excerpt of the .json file:

[
    [...],
    [{
        "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
    }],
[...]
]

As you can see, there are three entries for Auburn, so I want "Auburn" to be the optgroup header and the three entries (displaying zipcodes) to be underneath it. I included a singular entry (Auburn University) that should also display the same way, but only with the single zipcode.

This is basically the format I am looking for in the dropdown:

AUBURN
  36380
  36831
  36832
AUBURN UNIVERSITY
  36849

Here is what I have set up on my page to configure the plugin:

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

Currently it just outputs the zipcodes:

Since I specified to search in both the 'Display' and 'Zipcode' fields, I can search for either the zipcode or the city and it will filter accordingly:

According to the plugin's usage page, I was led to believe supplying the optgroup* options would achieve what I am looking to do, but apparently that is not so.

Does anyone know how to implement what I am seeking to do?

score 4 · Answer 1 · answered Mar 18 '20 at 03:12

Detail information: 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>';
                    }
                }
        });

benvc · Answer 2 · 2018-08-10T19:47:55.397

It sounds like you are successfully returning the data from your JSON file to the options array in your selectize function (though I can't tell for sure from the code snippet you provided). I am guessing that what you are missing is to include the optgroups data, so that the group headers will be displayed in your dropdown.

Following is an example of how to include optgroups and the corresponding field, label and value properties you will need:

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

Get selectize.js to show optgroup headers

2 Answers2