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

Question

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

代码示例 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 仍将以文本输入/标记方式运行。示例如下:

<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 进行以下更改以实现所需的行为。

// 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 仍将以文本输入/标记方式运行。示例如下:

<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 为我指明了正确的方向。