Question

我有一个选择字段（多个），我还需要添加自定义标签。但是当我输入自定义数据并单击输入时，它不起作用。当ajax请求完成后，我的自定义数据会显示在下拉列表中，之后我可以从下拉列表中选择它。单击“输入”按钮后是否可以添加标签？

<select id="autocomplete" multiple="multiple" name="to[]"></select>

$("#autocomplete").select2({
        ajax: {
          url: url,
          dataType: 'json', 
          cache: false
        },  
        tags: true,           
        minimumInputLength: 1 
    });

Answer 1

您是否尝试将 selectOnClose 设置为true（默认为false）？

selectOnClose boolean false 在下拉列表关闭时实现自动选择。

有关详细信息，请参阅https://select2.org/configuration/options-api。最后但并非最不重要：一个jsfiddle对于其他人来说非常有帮助。

更新：在我的情况下，我偶然发现了Results.highlightFirstItem函数 - 因此无需将selectOnClose设置为true：

Results.prototype.highlightFirstItem = function () {
    var $options = this.$results
      .find('.select2-results__option[aria-selected]');

    var $selected = $options.filter('[aria-selected=true]');

    // Check if there are any selected options
    if ($selected.length > 0) {
      // If there are selected options, highlight the first
      $selected.first().trigger('mouseenter');
    } else {
      // If there are no selected options, highlight the first option
      // in the dropdown
      $options.first().trigger('mouseenter');
    }

    this.ensureHighlightVisible();
};

更改为：

Results.prototype.highlightFirstItem = function () {
    var $options = this.$results
      .find('.select2-results__option[aria-selected]');

    // Highlight the first option
    $options.first().trigger('mouseenter');

    this.ensureHighlightVisible();
};

请注意，这是一个快速的肮脏解决方案，需要创建一个正确的请求（也就是github中的新问题）（如果这也是你的问题）。

select2 - 使用输入按钮

1 个答案: