Selectize.js: Sort items alphabetically

[Davidslv]

Hello,

I'm trying to sort alphabetically the list of items after the item has been added, although my solution almost works, it doesn't exactly works properly as it loses focus on the input element given I'm replacing the html by doing $parent.html(alphabeticallyOrderedDivs);.

I was wondering if there's a better way of doing this, I've also tried onBlur but the problem is that we have more inputs with .select2 class in the form which makes it even harder to just sort the ones where it lost focus.

I hope you can help me, the following code is what I tried using onItemAdd, I'm open to suggestions.

  $(".select2").selectize({
    plugins: ['remove_button'],
    closeAfterSelect: true,
    create: false,
    onItemAdd: function(value, $item) {
      var $parent   = $item.parent();
      var $children = $parent.children();

      var alphabeticallyOrderedDivs = $children.sort(function (a, b) {
        if ( $(a).text() != "" && $(b).text() != "" ) {
          return $(a).text() > $(b).text();
        }
      });

      $parent.html(alphabeticallyOrderedDivs);
    },
  });

Thank you,
David Silva

[jbanety]

Hi @Davidslv,
you can do alphabetical sorting with the sortField option.
Like this (name is the field you want to sort on) :

$(".select2").selectize({
    plugins: ['remove_button'],
    closeAfterSelect: true,
    create: false,
    sortField: [
        {
            field: 'name',
            direction: 'asc'
        },
        {
            field: '$score'
        }
    ]
}); 

You have to keep the $score field to make it working.
Have a look to the doc to have more information about that.

[moussa-b]

@jbanety I am not sure that sortField sorts the selected values, from what I have understood sortField sorts the options, not the selected values.

[Cauen]

I think it's too late, but that may help others in the future.
I've created a snippet to delete and add all items in order based on selectize.js api docs
https://github.com/selectize/selectize.js/blob/master/docs/api.md

var $select = $('#input-to-selectize').selectize({
    plugins: ['restore_on_backspace', 'remove_button'],
        create: true,

    onItemAdd: function(value, $item) {
        var currentItems = (this.getValue());
        var arrayCurrentItems = currentItems.split(",").map(function(item) {
            return item.trim();
        });
        arrayCurrentItems.sort(function(a, b){
            return (a>b);
        })
        this.clear();
        this.clearOptions();
        var that = this;

        var e = this._events.item_add;
        delete this._events.item_add;
        jQuery.each( arrayCurrentItems, function( key, val ) {
            that.addOption({value: val, text: val});
            that.addItem(val);
        });

        this._events.item_add = e;
        this.refreshOptions();
    },
});
//var selectize = $select[0].selectize; // This stores the selectize 

It's needed to delete add_item event, to to not generate an infinite loop.
Here is a working Fiddle: https://jsfiddle.net/Backstap/292ysrc5/

[urmamb]

Use sortField and you should see the sort sortField: [{field: 'name', direction: 'asc'}] forexample

var select = $('.js_client_search').selectize({
            maxItems    : 1,
            valueField  : 'name',
            labelField  : 'name',
            searchField : ['name', 'message'],
            options     : [],
            maxOptions  : 30,
            loadThrottle: 0,
            sortField   : [{field: 'name', direction: 'asc'}],

[gpcovalience]

If you are adding options in the selectize dropdown dynamically then you can use the sortField option like this:

var data= $('#drpdwn').selectize({
                            plugins: ['remove_button'],
                            sortField: [{'field': 'text', 'direction': 'asc'}]
                        })[0].selectize;

$.each(response, function(key, value){
     data.addOption({value: key, text: value});
});

You need to set the name of the valueField in the field of the sortFieldoption followed by the required direction. In my case, it is text.
I hope it would be helpful.