当Maxitem = 1时，是否可以防止Selectize转换为下拉？

Question

我正在使用Selectize为内部网站创建下拉菜单和文本输入。 我的问题是，每当maxItems设置为1时，Selectize会自动将字段变为下拉列表。 我希望它具有textarea外观，并标记新项目。 但我不希望它允许用户创建多个值。 代码示例如下。

代码示例1：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        delimiter: ',',
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 2,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

此代码将创建所需的效果，但最多允许两个项目。 由于数量字段应该只允许一个值，我想阻止用户尝试发送两个+值。 此代码生成所需的外观，但不需要的功能。

代码示例2

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        delimiter: ',',
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

这将阻止用户尝试发送多个值，但会为输入框提供下拉外观。 此代码生成所需的功能，但不需要的外观。

我检查了Selectize文档，但没有找到任何方法来覆盖此行为。

对Selectize.js进行以下更改以允许所需的行为。

// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
    self.settings.mode = 'multi';
}

现在，如果将“singleOverride：true”添加到您的选择定义中，它将允许maxItems设置为1，但Selectize仍将以textinput / tagging方式运行。 示例如下：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        singleOverride: true,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

感谢迈克麦考恩指出我正确的方向。

Answer 1

对Selectize.js进行以下更改以允许所需的行为。

// This line is original to Selectize.js.
self.settings.mode = self.settings.mode || (self.settings.maxItems === 1 ? 'single' : 'multi');
// Add the following code beneath it.
if(self.settings.singleOverride === true){
    self.settings.mode = 'multi';
}

现在，如果将“singleOverride：true”添加到您的选择定义中，它将允许maxItems设置为1，但Selectize仍将以textinput / tagging方式运行。 示例如下：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        singleOverride: true,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>

感谢迈克麦考恩指出我正确的方向。

Answer 2

实际上，没有办法按照原样执行您正在寻找的内容。 以下是selectize.js中的违规代码：

if ((settings.maxItems === null || settings.maxItems > 1) && self.tagType === TAG_SELECT) {
    $input.attr('multiple', 'multiple');
}

显然，他们确实有一个可以覆盖该代码的插件架构，但构建插件将超出这个问题的范围。

您还可以为其repo创建一个fork： https ： //github.com/selectize/selectize.js并更新该代码，或者只更新本地副本。

Answer 3

我遇到了同样的问题，但我不喜欢改变Selectize源码的想法。 感谢我的同事的建议，我可能找到了更好的解决方案。

简单地设置mode: 'multi'而不是singleOverride: true在实现中似乎可以解决问题。

在您的情况下，代码将如下所示：

<input type="text" id="quantitySelect" placeholder="Quantity" name="quantity">

<script>
    $('#quantitySelect').selectize({
        plugins: ['restore_on_backspace'],
        create: true,
        maxItems: 1,
        tagType: "TAG_SELECT",
        mode: 'multi',
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
</script>