refresh new options in selectize

Question

I have a dropdown which I use Selectize.js to decorate it to use its search and other stuff .

but I fetch my data from server by another dropdown id . so what I want is , when I get the new data's from server and add those items to this dropdown users will be able to select those items .

my current code is:

HTML

<select id="sendmail-roles" ng-model="SelectedUserRole"  ng-change="GetUsers()" ng-options="t.Key as t.Value for t in RolesList">
     <option selected="selected" value="">Select Role</option>
</select>

<select id="sendmail-users" ng-model="SelectedUser" ng-options="t.Key as t.Value for t in UsersList">
     <option selected="selected" value="">Select User</option>
</select>

JS

$("#sendmail-users").selectize();

Angular Controller

$scope.GetUsers = function () {
    $http({
        url: "MessageHandler.ashx?mode=getuserslist&roleid=" + $scope.SelectedUserRole,
        method: "GET",
    }).success(function (data) {
    $scope.UsersList = data;

    setTimeout(function () {
        var sel = $("#sendmail-users");
        var selectize = sel[0].selectize;
        selectize.refreshOptions(false);
    }, 1)
  });
}

but the dropdown does not update , although dropdown fill with the options . but selectize does not update its items .

I will be glad if you can help me .

thank you .

Answer 1

I'm not sure if this is what you need. Selectize make a cache of already queried items. If you want to requery and re-render items you should clear cache.

You can achieve it by writing a line of code:

yourSelectizeObject.loadedSearches = {};

Study my full example:

// initialize privileged users
    $(this).find(".selectize-privileges").each( function () {
      $(this).selectize({
        plugins: {
          'remove_button': {
            'title': 'Usuń'
          },
        },
        valueField: 'id_user',
        labelField: 'name',
        searchField: ['name','teamname','skills'],
        maxItems: null,
        maxOptions: null,
        create: false,
        preload: true,
        //persist: false,
        render: {
          item: function(item, escape) {
            return '<div>' +
              (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
              (item.teamname ? ' <span class="teamname">' + escape(item.teamname) + '</span>' : '') +
            '</div>';
          },
          option: function(item, escape) {
            return '<div>' +
              '<span class="name">' + escape(item.name) + '</span>' +
              (item.teamname ? ' <span class="teamname">' + escape(item.teamname) + '</span>' : '') +
              (item.skills ? '<span class="skills">' + escape(item.skills) + '</span>' : '') +
            '</div>';
          }
        },
        load: function(query, callback) {
          var search_in = [];
          this.$input.closest('form').find('input[name="search_in[]"]:checked').each(function() { search_in.push($(this).val()); });
          var selPrPriv = this;
          $.ajax({
            url: 'project-privilege-details.html',
            type: 'POST',
            dataType: 'json',
            data: {
              id_project: id_project,
              search_in: search_in,
              q: query,
              loaded: $(selPrPriv).attr('data-loaded')
            },
            error: function() {
              callback();
              selPrPriv.loadedSearches = {};
            },
            success: function(res) {
              callback(res.users);
//              selPrPriv.refreshOptions();
              if ($(selPrPriv).attr('data-loaded') != '1')
              {
                selPrPriv.setValue(res.id_user_privilege);
                $(selPrPriv).attr('data-loaded', '1');
              }
              else
                selPrPriv.refreshItems();
              selPrPriv.loadedSearches = {};
            }
          });
        }
      });
    });

Hope this is usefull for you.