选择 js 设置活动选项答案

【问题标题】：selectizejs set active option选择 js 设置活动选项
【发布时间】：2018-05-23 06:10:08
【问题描述】：

我遇到了 selectizejs 的问题，它是选定的活动选项功能。

如果您想要一个示例，一个很好的示例是 selectizejs 的 github 存储库中的 "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());
        }

这在大多数情况下都有效，除了当我按下输入时，它会在我之前选择活动项目，强制活动选项成为第一个。有没有一种快速的方法来实现这一点，而不是深入插件来定制它？感谢您的意见！

【问题讨论】：

标签： javascript selectize.js

【解决方案1】：

我只是为将来的其他人想出来的。分析插件后，我发现setActiveOption 有效：

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

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

【讨论】：