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

Question

我正在使用 Selectize 为内部网站创建下拉菜单和文本输入。我的问题是，只要将 maxItems 设置为 1，Selectize 就会自动将字段变成下拉列表。我希望它具有文本区域外观，并标记新项目。但我不希望它让用户创造不止一种价值。下面的代码示例。

代码示例 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>

此代码将创建所需的效果，但最多允许两个项目。由于数量字段应该只允许一个值，我想阻止用户尝试发送两个以上的值。 This code generates the desired look, but undesired functionality.

代码示例 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>

这将防止用户尝试发送多个值，但会为输入框提供下拉式外观。 This code generates the desired functionality, but undesired look.

我已经检查了 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," 添加到您的 selectize 定义中，它将允许将 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>

感谢 Mike McCaughan 为我指明了正确的方向。

Answer 1

确实没有一种方法可以按原样使用代码来完成您正在寻找的事情。这是 selectize.js 中的违规代码：

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

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

您还可以为他们的存储库创建一个分支：https://github.com/selectize/selectize.js 并更新该代码，或者只更新本地副本。

Answer 2

对 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," 添加到您的 selectize 定义中，它将允许将 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>

感谢 Mike McCaughan 为我指明了正确的方向。

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>

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

Is it possible to prevent Selectize from converting to dropdown when Maxitem = 1?

javascript

jquery

html

selectize.js