I am trying to modify the select2/AMD example here: https://stackoverflow.com/a/31600521/567736 and I'm not sure whether the issue I'm running into has to do with select2 or whether I am misunderstanding AMD. My code:
$.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>
As you can see, I am trying to refactor SelectionAdapter
into a separate module InlineSearchSelectionCustomAdapter
. However, the look and behavior of my new <select>
is different from the one from the original stackoverflow post.
Why is the behavior different and how to do I correct my error?
Import select2/selection/search
instead of 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>