Select2 4.0.0 AJAX - 通过标签

Question

选择突出显示的选项我通过AJAX获取用户ID和名称，并使用Select2搜索它们，但我的用户已请求通过按Tab键从下拉菜单中进行选择的功能按Enter键处理它。这是我的选择2声明：

$("#user-select").select2({ 
    ajax: { 
     url: "/api/User", 
     method: "get", 
     data: function (params) { 
      return { 
       search: params.term 
      }; 
     }, 
     beforeSend: function() { 
      $(".loading-results").text("Loading..."); 
     }, 
     processResults: function (data) { 
      return { 
       results: data 
      }; 
     }, 
     cache: true 
    }, 
    allowClear: true, 
    placeholder: "Enter a User ID or Name", 
    templateResult: function (data) { 
     return "(" + data.id + ") " + data.name; 
    }, 
    templateSelection: function (data) { 
     return "(" + data.id + ") " + data.name; 
    } 

“.select2-search__field”似乎是每当下拉的可见的，突出显示的元素获取类聚焦元素‘选择2 - results__option - 突出’。

我试过一些解决方案，但似乎没有任何工作，特别是因为这个元素出现并随时打开下拉菜单消失。不幸的是，我从我的尝试中丢失了代码，但是他们主要是通过在焦点输入上点击Tab时执行preventDefault，然后在突出显示的元素上触发单击事件或触发输入上的Enter键。

我也尝试调整selectOnClose选项，但似乎越野车在一般情况下，导致无尽的循环，当我有它正常运行，更少尝试覆盖它基于什么键被按下。

[编辑]
所选解决方案的工作，但不考虑指定的templateResult，而不是显示 “（）未定义”。所以，我调整它作为覆盖选择的选定选项添加突出显示的答案，然后在该选择上直接调用更改事件。

...（同初始选择2）

}).on('select2:close', function (evt) { 
    var context = $(evt.target); 

    $(document).on('keydown.select2', function (e) { 
     if (e.which === 9) { // tab 
      var highlighted = context.data('select2').$dropdown.find('.select2-results__option--highlighted'); 

      if (highlighted) { 
       var data = highlighted.data('data'); 

       var id = data.id; 
       var display = data.name; 

       $("#user-select").html("<option value='" + id + "' selected='selected'>" + display + "</option>"); 
       $("#user-select").change(); 
      } 
      else { 
       context.val("").change(); 
      } 
     } 
    }); 

Answer 1

我一直在试图找到一个解决这个问题为好。
主要问题是，select2事件不能提供任何关于哪个键被按下的信息。

所以我想出了这个黑客来访问select2上下文中的keydown事件。
我一直在测试它，以尽我所能，并且它看起来很完美。

selectElement 
.select2({ options ... }) 
.on('select2:close', function(evt) { 
    var context = $(evt.target); 

    $(document).on('keydown.select2', function(e) { 
     if (e.which === 9) { // tab 
      var highlighted = context 
           .data('select2') 
           .$dropdown 
           .find('.select2-results__option--highlighted'); 
      if (highlighted) { 
       var id = highlighted.data('data').id; 
       context.val(id).trigger('change'); 
      } 
     } 
    }); 

    // unbind the event again to avoid binding multiple times 
    setTimeout(function() { 
     $(document).off('keydown.select2'); 
    }, 1); 
}); 

Answer 2

对于任何人希望得到片选工作与多选，这个工作对我来说：

$("#selected_ids").select2({ multiple: true }).on('select2:open', function(e) { selectOnTab(e) }); 

function selectOnTab(event){ 

    var $selected_id_field = $(event.target); 

    $(".select2-search__field").on('keydown', function (e) { 
    if (e.which === 9) { 
     var highlighted = $('.select2-results__option--highlighted'); 

     if (highlighted) { 
     var data = highlighted.data('data'); 
     var vals = $selected_id_field.val(); 
     if (vals === null){ 
      vals = []; 
     } 
     vals.push(data.id) 
     $selected_id_field.val(vals).trigger("change") 
     } 
    } 
    }); 
} 

目前，这限制了我每页一个领域，但它做的工作。

谢谢MikeOShay和Sniffdk为此深入探讨。
目前有可能解决这个对我们来说是开放的问题：

https://github.com/select2/select2/issues/3359

Answer 3

的selectOnClose功能似乎是稳定的4.0.3，和更简单的解决方案：

$("#user-select").select2({ 
    ... 
    selectOnClose: true 
}); 

这是可能的模板的使用干扰了这个功能，我没有使用它，所以我没有测试过。

Answer 4

您可以简单地改变选择二源头控制，只有一行：如果

其他（关键=== KEYS.ENTER）

否则，如果（键=== KEYS.ENTER | | 关键=== KEYS.TAB）

从这：

this.on('keypress', function (evt) { 
    var key = evt.which; 

    if (self.isOpen()) { 
    if (key === KEYS.ESC || key === KEYS.TAB || 
     (key === KEYS.UP && evt.altKey)) { 
     self.close(); 

     evt.preventDefault(); 
    } else if (key === KEYS.ENTER) { 
     self.trigger('results:select', {}); 

     evt.preventDefault(); 

对此

this.on('keypress', function (evt) { 
    var key = evt.which; 

    if (self.isOpen()) { 
    if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) { 
     self.close(); 

     evt.preventDefault(); 
    } else if (key === KEYS.ENTER || key === KEYS.TAB) { 
     self.trigger('results:select', {}); 

     evt.preventDefault(); 

的变化可以在源文件的src/JS /选择2/core.js中完成，或在编译的版本。当我应用此更改时，我修改了src/js/select2/core.js并执行gruntfile.js来再次编译select2库。这个解决方案不是一种解决方法，但是对于select2来说却是很好的功能。

Answer 5

玩过所有这些解决方案后，这一个似乎赶上了大多数案件，并为我工作最好。注意我正在使用select2 4.0.3但是不喜欢selectOnClose，如果你有多个select2盒子有多个它会造成严重破坏！

var fixSelect2MissingTab = function (event) { 
    var $selected_id_field = $(event.target); 

    var selectHighlighted = function (e) { 
     if (e.which === 9) { 
      var highlighted = $selected_id_field.data('select2').$dropdown.find('.select2-results__option--highlighted'); 

      if (highlighted) { 
       var data = highlighted.data('data'); 
       if (data) { 
        var vals = $selected_id_field.val(); 
        if (vals === null) { 
         vals = []; 
        } 
        if (vals.constructor === Array) { 
         vals.push(data.id); 
        } else { 
         vals = data.id; 
        } 
        $selected_id_field.val(vals).trigger("change"); 
       } 
      } 
     } 
    }; 

    $('.select2-search__field').on('keydown', selectHighlighted);  
} 

$(document).on('select2:open', 'select', function (e) { fixSelect2MissingTab(e) }); 
$(document).on('select2:close', 'select', function (e) { 
    //unbind to prevent multiple 
    setTimeout(function() { 
     $('.select2-search__field').off('keydown'); 
    }, 10); 
}); 

这个解决方案的好处是，它是通用的，可以在框架代码应用于将连工作动态添加选择2盒。