Selectize.js: Disable automatic sort

[eliashdezr]

Hi, I'm receiving a pre-ordered list (JSON) but when I loaded into the selectize control, it re-orders the list by the Id and I don't want this. How I can let selectize use the order of my JSON?

This is the JSFiddle example:
http://jsfiddle.net/LYYab/

Thanks.

[erlingur]

I would also like to be able to disable automatic sorting. It's really, really frustrating that Selectize automatically messes with the order of options that are added to it.

Is there no way to disable autosort?

[antsa]

@eliashdez @erlingur Remove sortField: "text" from the selectize options to disable the auto sorting.

[erlingur]

@antsa I don't have that. I use the default configuration of $("#element").selectize() and it still does the auto sorting.

[antsa]

And you are using 0.8.5? Without the sortField option it works as expected for me with just a selectelement with options inside of it.

The example of @eliashdez seemed to work differently with loading the data from JSON, where sorting happened. Here the trick seemed to be to set the sortField: "Id"

[erlingur]

@antsa Yes. Here is a jsfiddle demonstrating the problem: http://jsfiddle.net/8H62B/6/

When you first load the page with it works fine but when I attempt to update the select with new options it will auto sort them.

On that jsfiddle, if you begin by looking at the options, then click the button and look at the options again you will see what I mean.

[antsa]

@erlingur Apparently when adding options it does sorting and doesn't use the original order of the data—would it work for you to set the order with e.g. sortField: "text" in that case?

When calling selectize on a existing select with options leaving that option out will keep the original order of the option elements.

[erlingur]

@antsa sortField: 'text' will sort the options based on their text right? That wouldn't work for me since I have presorted options that are not really based on either the value or the name. I would ideally need addOptions() to respect the insert order. I'm looking at it now, trying to make it do that.

[erlingur]

So I created a pull request with a proposed fix. What do you think @antsa?

[ai]

I need it too

[erlingur]

Hey @ai, I created a pull request for this here: https://github.com/brianreavis/selectize.js/pull/295

You can use this branch if you want this functionality now: https://github.com/Reiknistofa/selectize.js/tree/respect_insert_order_in_addoption

[dbpolito]

:+1:

[ibtjw]

+1

[dhiemstra]

+1

[chriserik]

+1

[xjunior]

:+1: will this be merged?

[raicheff]

+1

[xjunior]

With the current most common model with API's serving multiple front ends, it's rather common to have dynamic elements. It's also common that the API will provide these elements in the correct sorting, making the current automatic sorting not just a deprecated feature, but seen as a bug for most of the users.

Thanks for fixing it.

[erlingur]

@xjunior No problem! Yeah, seems like something a lot of people would like.

This should still merge cleanly with the latest version. Hopefully @brianreavis will chime in here with his thoughts.

[freefallfred]

I solved this problem by setting the following option when initializing the selectize object...
Works with my pre-ordered JSON data!

score: function() { return function() { return 1 }; }

[erlingur]

@freefallfred Like this? http://jsfiddle.net/a9ttjt7v/ Doesn't fix it for me.

[hidegh]

@freefallfred
i think you have the original order, but your searches won't work. so that's not a solution.

please MERGE this: https://github.com/Reiknistofa/selectize.js/tree/respect_insert_order_in_addoption

until then an additional orderId property will 'solve' our problem

[z3cka]

Pass the string Id the sortField option like this: http://jsfiddle.net/z3cka/nyx6ppz4/

If you want to disable the auto-sort, I found passing an empty array to the sortField option did the trick. The sortField option can take a string or an array, so to pass an empty array to it, do this:
sortField: [[]], (http://jsfiddle.net/z3cka/koo4mw68/)

Let me know if this works for you.

[brianreavis]

A fix for this is coming soon (in the next release, in a couple days). See https://github.com/brianreavis/selectize.js/issues/640#issuecomment-71788203

[althaus]

So what is the final solution to this issue? I've tried all kinds of settings and only the following seems to preserve the order from our ajax call:

var options = {
    other: settings,
    score: function() {
       return function(search) {
            return 1;
       }
    }
}

[Danny-weebo]

Has this issue been resolved? I can't get the correct behavior no matter what I try. @israelidanny

[hidegh]

@Danny-weebo if not, just create an additional sort-column with numbers asc/desc and use it as def. sort (see my prev. comment)

[developer239]

This worked for me:

$("your-selector").selectize({ score: function() { return function() { return 1 }; },

[diofeher]

Changing the score function will lose the power to search in the input. Still looking for a solution...

[pnpetroff]

Still no way to disable auto sort?

When I reorder with the drag_drop plugin it resets on update in my application.

[Pulsar-Mind]

Still nothing here? Im facing the same problem.

[thomascjohnson]

Ping!

[Skintillion]

When exporting from database, make a column with a count and use that?

[saxodel]

Same here.

[genechuah]

+1
I need the original input sequence to be honored when pre-populating the selected options.

[FlyingTigra]

Still have this bug! Help!

[dtenenba]

Despite this issue being closed, I'm still having it 5 years after it was opened, as are others it seems. (with version 0.12.4). I'm about to ditch selectize altogether because of this. The score solutions posted by others don't work for me; they correct the sorting problem but disable selection.

[mezga0153]

This works for me:

"score": function(search_string) {
    return function(element) {
        return new Sifter([element]).search(search_string, {
            fields : ["same as searchField"]
        }).items.length;
    };
},

It disables the default sorting and the search function keeps working as expected

[LjyYano]

Still have this bug

[legshooter]

score: function () {
    return function () {
        return 1
    }
},

Seems to be a working hack.

@brianreavis posted here and mentioned https://github.com/selectize/selectize.js/issues/640#issuecomment-71788203 where he said:

Since the beginning, Selectize has been designed around client-side search and sorting for fast option selection. Using server ordering is possible, but it's going to be a hack. In the future we might have a preserveOrder option that totally bypasses the sorting, but I can't say that's an immediate priority. It'll need to be done in a way that doesn't add a bunch more branches to the code than there already are.

[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'}],

[dresende]

@urmamb that's true for maybe most of the cases, but there are others where the server wants to prioritise some results over others (new movies, important people) and wants to show them first.

This doesn't mean that after the first results, if you continue typing, selectize could search and sort it out, but the first results should (with at least a flag/option) be unsorted.