Question

我有一个selectize.js下拉列表，它使用ajax从服务器提供项目列表。服务器从给定的字符串提供自动完成，因此我不需要选择性的本机过滤。此外，我真的需要关闭它：服务器输出可能完全不同于标准的字符串搜索算法。数据被精确地转换为javascript对象，但是selectize甚至没有显示弹出窗口，因为这些项目与selectize的过滤器不匹配。如何禁用或修改本机过滤并匹配突出显示algorythm？使用内置选项还是使用插件？或者唯一的方法是修改源？

修改

searchField：false / function（）不起作用（文档没有将它们视为可用的选项值）

EDIT2：

最终提出了这个诀窍：为每个项目添加一个假字段，为其分配一个搜索字符串，并告诉选择使用是否为searchField。但显然，应该有更好的方法，所以问题仍然存在。

Answer 1

我使用此解决方案（如果服务器的结果正确排序）：

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

或者这个（如果需要订购）

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

Sifter使用分数功能进行过滤。得分结果必须> 0

Answer 2

所以，搜索代码，我发现，Sifter模块（搜索/排序引擎，Selectize所依赖的），它确实有一个选项来禁用过滤，我们只需要将它转发给Selectize。我可以建议以下补丁：

在Selectize main .js文件中找到函数 getSearchOptions（）：

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

以下是：

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
    };
}

以下是之后：（添加了一个逗号，5行注释和补丁本身）

...
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
    };
},
...

很抱歉，我没有时间在Github上创建一个分支，项目截止日期已接近，而且，实际上也不确定，我现在能成为一个很好的贡献者，因为有些缺乏在Github工作的经历。所以，只需发布快速解决方法。

Answer 3

我用onInitialize方法解决了选择参数的问题：

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

Answer 4

我需要禁用搜索，以便iPhone无法显示键盘。我确定的解决方案通过挂钩选择设置使搜索字段只读（不修改实际源，因此选择仍然是可更新的）。这是代码，如果有人需要它：

// 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);
};

Answer 5

我们可以用一点 CSS 和一点 JS 来创建这个。而且看起来很完美。

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").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;
}

如何在selectize.js中禁用自动过滤？内置/插件/ modilfy源？

5 个答案: