AMD / select2 行为差异？答案

【问题标题】：AMD / select2 behavior discrapancy?AMD / select2 行为差异？
【发布时间】：2019-12-17 10:19:00
【问题描述】：

我正在尝试在此处修改 select2/AMD 示例：https://stackoverflow.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> 的外观和行为与原始 stackoverflow 帖子不同。

为什么行为不同以及如何纠正我的错误？

【问题讨论】：

标签： javascript jquery-select2 amd js-amd

【解决方案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>

【讨论】：