AMD / select2 行为差异?
Posted
技术标签:
【中文标题】AMD / select2 行为差异?【英文标题】:AMD / select2 behavior discrapancy? 【发布时间】:2019-12-17 10:19:00 【问题描述】:我正在尝试在此处修改 select2/AMD 示例:https://***.com/a/31600521/567736,但我不确定我遇到的问题是否与 select2 或我是否误解了 AMD 有关。我的代码:
$.fn.select2.amd.define("InlineSearchSelectionCustomAdapter", [
"select2/utils",
"select2/selection/multiple",
"select2/dropdown/search",
],
function (Utils, MultipleSelection, Search)
let adapter = Utils.Decorate(
MultipleSelection,
Search
);
return adapter;
);
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/utils',
'InlineSearchSelectionCustomAdapter'
], function (MultipleSelection, Search, Utils, InlineSearchSelectionCustomAdapter)
let SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
$('.inline-search-original').select2(
selectionAdapter: SelectionAdapter
);
$('.inline-search-amd').select2(
selectionAdapter: InlineSearchSelectionCustomAdapter
);
);
.select2-selection__choice__remove
display: none !important;
.select2-container--focus .select2-autocomplete .select2-selection__choice
display: none;
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box, original</p>
<select style="width: 200px" class="inline-search-original" multiple>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With an inline search box, using amd</p>
<select style="width: 200px" class="inline-search-amd" multiple>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
如您所见,我正在尝试将 SelectionAdapter
重构为单独的模块 InlineSearchSelectionCustomAdapter
。但是,我的新 <select>
的外观和行为与原始 *** 帖子不同。
为什么行为不同以及如何纠正我的错误?
【问题讨论】:
【参考方案1】:导入select2/selection/search
而不是select2/dropdown/search
$.fn.select2.amd.define("InlineSearchSelectionCustomAdapter", [
"select2/utils",
"select2/selection/multiple",
"select2/selection/search",
],
function (Utils, MultipleSelection, Search)
let adapter = Utils.Decorate(
MultipleSelection,
Search
);
return adapter;
);
$.fn.select2.amd.require([
'select2/selection/multiple',
'select2/selection/search',
'select2/utils',
'InlineSearchSelectionCustomAdapter'
], function (MultipleSelection, Search, Utils, InlineSearchSelectionCustomAdapter)
let SelectionAdapter = Utils.Decorate(
MultipleSelection,
Search
);
$('.inline-search-original').select2(
selectionAdapter: SelectionAdapter
);
$('.inline-search-amd').select2(
selectionAdapter: InlineSearchSelectionCustomAdapter
);
);
.select2-selection__choice__remove
display: none !important;
.select2-container--focus .select2-autocomplete .select2-selection__choice
display: none;
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<p>With an inline search box, original</p>
<select style="width: 200px" class="inline-search-original" multiple>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<p>With an inline search box, using amd</p>
<select style="width: 200px" class="inline-search-amd" multiple>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
【讨论】:
以上是关于AMD / select2 行为差异?的主要内容,如果未能解决你的问题,请参考以下文章
select2 ajax:定义 formatResult、formatSelection 和 initSelection 角色和行为