Skip to content

Commit 5ec852e

Browse files
committed
Added documentation for <input type="text" />
This adds basic documentation explaining that there are compatibility decorators for `<input type="text" />` support. This is not fully compatible with all features and requires the use of an external adapter like the `ArrayAdapter` or `AjaxAdapter` to provide a reasonable way to query results. This also triggers a warning if the adapter is used with a hidden input, as the degraded functionality when there is no JavaScript support should be discouraged.
1 parent e9bfa72 commit 5ec852e

5 files changed

Lines changed: 64 additions & 2 deletions

File tree

dist/js/select2.amd.full.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4993,6 +4993,16 @@ define('select2/compat/inputData',[
49934993
this._currentData = [];
49944994
this._valueSeparator = options.get('valueSeparator') || ',';
49954995

4996+
if ($element.prop('type') === 'hidden') {
4997+
if (console && console.warn) {
4998+
console.warn(
4999+
'Select2: Using a hidden input with Select2 is no longer ' +
5000+
'supported and may stop working in the future. It is recommended ' +
5001+
'to use a `<select>` element instead.'
5002+
);
5003+
}
5004+
}
5005+
49965006
decorated.call(this, $element, options);
49975007
}
49985008

dist/js/select2.full.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5432,6 +5432,16 @@ define('select2/compat/inputData',[
54325432
this._currentData = [];
54335433
this._valueSeparator = options.get('valueSeparator') || ',';
54345434

5435+
if ($element.prop('type') === 'hidden') {
5436+
if (console && console.warn) {
5437+
console.warn(
5438+
'Select2: Using a hidden input with Select2 is no longer ' +
5439+
'supported and may stop working in the future. It is recommended ' +
5440+
'to use a `<select>` element instead.'
5441+
);
5442+
}
5443+
}
5444+
54355445
decorated.call(this, $element, options);
54365446
}
54375447

dist/js/select2.full.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/options.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1588,6 +1588,38 @@ <h2 id="query">
15881588
</div>
15891589
</div>
15901590
</section>
1591+
1592+
<h2 id="input-fallback">
1593+
Compatibility with <code>&lt;input type="text" /&gt;</code>
1594+
</h2>
1595+
1596+
<p class="alert alert-warning">
1597+
<a href="announcements-4.0.html#hidden-input" class="alert-link">Deprecated in Select2 4.0.</a>
1598+
It is now encouraged to use the <code>&lt;select&gt;</code> tag instead.
1599+
</p>
1600+
1601+
<p>
1602+
In past versions of Select2, a <code>&lt;select&gt;</code> element could
1603+
only be used with a limited subset of options. An
1604+
<code>&lt;input type="hidden" /&gt;</code> was required instead, which did
1605+
not allow for a graceful fallback for users who did not have JavaScript
1606+
enabled. Select2 now supports the <code>&lt;select&gt;</code> element for
1607+
all options, so it is no longer required to use <code>&lt;input /&gt;</code>
1608+
elements with Select2.
1609+
</p>
1610+
1611+
<dl class="dl-horizontal">
1612+
<dt>Adapter</dt>
1613+
<dd>
1614+
<code title="select2/data/base">DataAdapter</code>
1615+
</dd>
1616+
1617+
<dt>Decorator</dt>
1618+
<dd>
1619+
<code title="select2/compat/inputData">InputData</code>
1620+
</dd>
1621+
</dl>
1622+
</section>
15911623
</div>
15921624

15931625
<script type="text/javascript">

src/js/select2/compat/inputData.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ define([
55
this._currentData = [];
66
this._valueSeparator = options.get('valueSeparator') || ',';
77

8+
if ($element.prop('type') === 'hidden') {
9+
if (console && console.warn) {
10+
console.warn(
11+
'Select2: Using a hidden input with Select2 is no longer ' +
12+
'supported and may stop working in the future. It is recommended ' +
13+
'to use a `<select>` element instead.'
14+
);
15+
}
16+
}
17+
818
decorated.call(this, $element, options);
919
}
1020

0 commit comments

Comments
 (0)