Question

我遇到了selectizejs的问题，并且选择了有效的选项功能。

如果你想要一个例子，一个很好的例子就是来自selectizejs'github repo的"Performance" example。如果你克隆并加载它，你会看到我要解释的内容。

当您开始输入某些内容时，Selectize会将第一个选项设置为active，当您键入时，如果该项目未离开列表，它将保持活动状态，直到它从列表中消失。会发生的情况是，当您有一个较大的组（其中选项实际上在输入下方的div内滚动）时，当您与可能的100个不同选项匹配时，滚动的div将不会选择第一个选项，并且您最终必须向上滚动div回到第一个选项。

我很懒，所以我没有链接说明这个的jsfiddle。相反，我指的是他们的表现例子。以下是如何用该示例演示我正在谈论的内容。如果您输入caa然后按下（以选择第二个），然后按下ca的删除，您会看到活动选项落在列表底部。我想要的是每次人们输入一个字母时，只要刷新列表，就会始终选择第一个选项。这是他们的回购中的示例代码：

var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
var options = [];
for (var i = 0; i < 25000; i++) {
    var title = [];
    for (var j = 0; j < 8; j++) {
        title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
    }
    options.push({
        id: i,
        title: title.join('')
    });
}
$('#select-junk').selectize({
    maxItems: null,
    maxOptions: 100,
    valueField: 'id',
    labelField: 'title',
    searchField: 'title',
    sortField: 'title',
    options: options,
    create: false
});

我有遗失的细节吗？我尝试做的是在下面配置：

        onType: function() {
            //console.log(this.$dropdown);
            var $options = $('.option', this.$dropdown);
            $options.each(function() {
                $(this).removeClass('active');
            });
            $($options[0]).addClass('active');
            $('.selectize-dropdown-content', this.$dropdown).scrollTop(0);
            this.setValue($($options[0]).text());
        }

这大部分都有效，除了当我按下输入时它选择活动项目PRIOR，强制活动选项成为第一个。有没有一种快速的方法来实现这一点，而不是深入挖掘插件来定制它？感谢您的投入！

Answer 1

我以后只为其他人想出来了。在分析插件后，我发现了setActiveOption，这有效：

        onType: function() {
            var $options = $('.option', this.$dropdown);
            this.setActiveOption($($options[0]));
        }

将活动选项设置为第一个元素。

selectizejs设置有效选项

1 个答案: