How Can I Disable Automatic Filtering In Selectize.js? Built-in / Plugin / Modilfy Source?

I have a selectize.js drop-down, which loads a list of items from the server using ajax. The server provides an autocomplete from the given string, so I don't need selectize's nati

Solution 1:

I use this solution (if results from server is ordered correctly):

score: function() { returnfunction() { return1; }; },

or this (if need order)

score: function(search) {
        var score = this.getScoreFunction(search);
        returnfunction(item) {
            return1 + score(item);
        };
    },

Sifter uses the score function to filter. Result of score must be > 0.

Solution 2:

I needed to disable searching so iPhones won't be displaying the keyboard. The solution I settled on makes the search field readonly by hooking into the selectize setup (without modifying the actual source, so selectize is still updatable). Here's the code, if anybody needs it:

// Put this code after you've included Selectize// but before any selectize fields are initializedvar prevSetup = Selectize.prototype.setup;

Selectize.prototype.setup = function () {
    prevSetup.call(this);

    // This property is set in native setup// Unless the source code changes, it should// work with any versionthis.$control_input.prop('readonly', true);
};

Solution 3:

So, searching the code, I've found out, that Sifter module (searching/sorting engine, which Selectize relies on), it does have an option to disable filtering, we just need to forward it up, to Selectize. I can suggest the following patch:

Locate the function getSearchOptions() in Selectize main .js file:

https://github.com/brianreavis/selectize.js/blob/master/dist/js/selectize.js

Here is the before:

getSearchOptions: function() {
    var settings = this.settings;
    var sort = settings.sortField;
    if (typeof sort === 'string') {
        sort = [{field: sort}];
    }

    return {
        fields:      settings.searchField,
        conjunction: settings.searchConjunction,
        sort:        sort
    };
}

And here's the after: (added a comma, 5 lines of comments, and the patch itself)

...
getSearchOptions: function () {
    var settings = this.settings;
    var sort = settings.sortField;
    if (typeof sort === 'string') {
        sort = [{field: sort}];
    }

    return {
        fields:      settings.searchField,
        conjunction: settings.searchConjunction,
        sort:        sort,
        // A patch to allow to disable native filtering, in the case,// when we want to provide search results on the server side.// Negative form of the setting is to avoid changing the standard// behaviour, (and, possibly, ruining the existing code), when this// parameter is missing.
        filter      : !settings.dontFilter
    };
},
...

Sorry, I just don't have time to create a branch on Github, the project deadline is near, and also, actually not sure, that I'll manage to be a fine contributor for now, due to some lack of experience working in Github. So, just posting a quick workaround.

Solution 4:

I solved with onInitialize method in selectize parameters:

$("select").selectize({
        onInitialize: function() {
             this.$control_input.attr('readonly', true);
        }
});

Solution 5:

With a little bit of CSS and a little bit of JS we can create this. And it looks perfect.

var select = $("#my-select-input");
$(select).next().find("div.selectize-input").addClass("no-searchable"); // Adding style to the div
$(select).next().find("div.selectize-input > input").addClass("no-searchable"); // Adding style to the input
$(select).next().find("div.selectize-input > input").prop("readonly", true); // Setting the input to read-only
$(select).next().find("div.selectize-input > input").prop("inputmode", "none"); // Guarantee in case it opens on the cell phone and click on the input no keyboard is opened
$(select).next().find("div.selectize-input > input").focus(function () { // Hack for when the search input gets the focus it will automatically blur.
    $(this).blur();
});

.no-searchable {
    cursor: pointer !important;
    background-color: #FFFFFF!important;
}
.has-itemsinput.no-searchable {
    width: 1px!important;
}