How can I disable automatic filtering in selectize

2019-07-12 16:07发布

问题:

I have a selectize.js drop-down, which feeds 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 native filtering. Besides, I really need to turn it off: The server output may be totally different from the one, feeded by a standard string-search algorythm. The data is feeded finely into javascript objects, but selectize doesn't even show a popup, since those items doesn't match selectize's filter. How can I disable or modify native filtering and matches highlighting algorythm? Either with a built-in option, or with a plugin? Or the only way to go, is to modify the source?

EDIT:

searchField: false / function() doesn't work (and documentation doesn't mention them as available option values)

EDIT2:

Eventually came up with this trick: Add a fake field to each item, assign a search string to it and tell selectize to use is as a searchField. But obviously, there should a better way, so the question is still open.

回答1:

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 initialized
var 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 version
    this.$control_input.prop('readonly', true);
};


回答2:

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

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

or this (if need order)

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

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



回答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.