Using autoform and selectize/select2 to create dynamic select options groups


#1

I am trying to create a select dropdown list with two groups using either select2 or selectize. Using the following in my schema (not using select2 or selectize), it works as it should. However, when I include the type: "select2" I get a bunch of errors about duplicate ids, and if I use type: "selectize" only the second group (Boring Years) works.

JS

    "recipeIngredients.$.ingredient": {
    type: String,
    label: "Ingredient/Recipe",
    optional: true,
    autoform: {
    //type: "select2",
    //type: "selectize",
      options: function () {

        var results = [];
        var currentUserId = Meteor.userId();
        var mapResults = function(category) {
          results.push({label: category.ingredientName, value: category._id});
        };
        _.each( Ingredients.find({createdBy: currentUserId}).fetch(), function(doc) {
          mapResults(doc);
        });

        return [
          {
            optgroup: "Fun Years",
            options: results
          },
          {
            optgroup: "Boring Years",
            options: [
              {label: "2011", value: 2011},
              {label: "2010", value: 2010},
              {label: "2009", value: 2009}
            ]
          }
        ];
      }
    }
 },

#2

Any info on how you solved this issue? I’m having the same problem with select2 (although I’m passing the options through a Template helper). Would appreciate any help. Thanks!


#3

I haven’t been able to get Select2 to work with autoform, but Selectize works for me. That being said, I have only been using the allowedValues field instead of options, so I can’t help you with that particular issue. But I would go with selectize because I’ve had much better success with that library overall.


#4

Ok, will switch to selectize then. Thanks!