select2 multi select 字符错误最少
select2 multi select with minimum character bug
我使用 select2 已有一段时间了,但我才刚刚开始使用 multi selects。
从一开始我就遇到了同样的问题。
每当我制作一个 multiselect 下拉菜单,要求最少 1 个字符时,它会告诉我 "Please enter 1 or more characters",很好吧?
好吧,当我单击页面中的其他位置时,此弹出窗口仍然存在。
如何解决这个问题?
$("#e1").select2({
minimumInputLength: 1
});
http://jsfiddle.net/Jeanpaul1994/3tfcm83n/1/
编辑
我的多select。
@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
});
我不太了解这个特定的插件,但在使用了您发布的 fiddle 之后,我想出了一个修复方法。我通过添加一个附加方法来修复 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);
我使用 select2 已有一段时间了,但我才刚刚开始使用 multi selects。 从一开始我就遇到了同样的问题。
每当我制作一个 multiselect 下拉菜单,要求最少 1 个字符时,它会告诉我 "Please enter 1 or more characters",很好吧?
好吧,当我单击页面中的其他位置时,此弹出窗口仍然存在。
如何解决这个问题?
$("#e1").select2({
minimumInputLength: 1
});
http://jsfiddle.net/Jeanpaul1994/3tfcm83n/1/
编辑
我的多select。 @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
});
我不太了解这个特定的插件,但在使用了您发布的 fiddle 之后,我想出了一个修复方法。我通过添加一个附加方法来修复 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);