select2 具有最小字符错误的多选

Question

我现在使用 select2 有一段时间了，但我刚刚开始使用多选。 从一开始我就有同样的问题。

每当我使用最少 1 个字符的要求进行多选下拉菜单时，它都会告诉我“请输入 1 个或更多字符”，对吗？

好吧，当我单击页面中的其他位置时，此弹出窗口仍然存在。

如何解决这个问题？

$("#e1").select2({ 
     minimumInputLength: 1
});

http://jsfiddle.net/Jeanpaul1994/3tfcm83n/1/

编辑

我的多选。 @Html.DropDownListFor(model => model.Visit.ExtraHosts, new List(), null, new { @class= "form-control select2-customselector", @multiple = "multiple" })

我的 Ajax 调用。

$('#@Html.IdFor(model => model.Visit.EmployeeId), #@Html.IdFor(model => model.Visit.ExtraHosts)').select2({
            ajax: {
                url: '@Url.Action("GetHostsViaAJAX", "Visitors")',
                dataType: 'json',
                type: "POST",
                data: function (params) {
                    return {
                        searchTerm: params.term
                    };
                },
                processResults: function (data) {
                    return { results: data };
                }
            },
            placeholder: "@IAMMVCResources.SelectAHost",
            minimumInputLength: 1,
            allowClear: true
        });

Answer 1

我对这个特定插件了解不多，但是在使用您发布的小提琴后，我想出了一个修复方法。我通过添加一个额外的方法来修复 select2 扩展了 jQuery 函数。代码可以在下面找到，fiddle has been updated。

/******************************************************
*******************************************************
Fixes select2.js issues with multi-select <select> elements.
*******************************************************
*******************************************************/
(function($) {
    //Make sure that the html mouseup event listener is not added more than once.
  var isFixed = false;
  $.fixSelect2 = function() {
    if (!isFixed) {
        //Set is fixed to true to prevent event listener from being added more than once.
      isFixed = true;
      $('html').mouseup(function(e) {
        //The target of the mouseup event.
        var target = $(e.target);
        var classList = null;
        var isSelect2 = false;
        var name = "";
        var hideSelect2 = function() {
          $('.select2-dropdown-open').removeClass('select2-dropdown-open');
          $('.select2-drop').hide();
        };
        //If the target is not the html element, proceed.
        if (!target.is(this)) {
            //Get the class of the target element, if applicable.
          classList = target.attr('class');
          //If the element has class(es), parse them.
          if (classList !== "") {
            classList = classList.split(' ');
            for (var i = 0, len = classList.length; i < len; i++) {
              name = classList[i];
              //If current class name contains "select2" in the string
              //then we can assume the element is a select2 element
              //and no further processing is necessary.
              if (name.indexOf('select2') > -1) {
                isSelect2 = true;
                break;
              }
            }
          }
          //Only if the target of the mouseup event is not a select2 element
          //We should hide the select2 components.
          if (!isSelect2) {
            hideSelect2();
          }
        } else {
            //If the event target is the html element itself, then this is outside of the current
          //select2 context and we know that the target is not a select2 element, so we should
          //proceed to hide the select2 elements.
          hideSelect2();
        }
      });
    }
    //Return the jQuery instance for chaining.
    return this;
  };

})(jQuery);