|
@@ -5,24 +5,6 @@ slug: announcements-4.0
|
|
---
|
|
---
|
|
|
|
|
|
<div class="container">
|
|
<div class="container">
|
|
- <section id="pre-release">
|
|
|
|
- <h1>Pre-release notes</h1>
|
|
|
|
-
|
|
|
|
- <hr />
|
|
|
|
-
|
|
|
|
- <p class="lead">
|
|
|
|
- The 4.0 release is ready for early adopters interested in testing it out.
|
|
|
|
- You can use the development version, available on GitHub, by getting the
|
|
|
|
- source code available in the <code>select2-ng</code> branch. The source
|
|
|
|
- code can be
|
|
|
|
- <a href="https://github.com/select2/select2/archive/select2-ng.zip">
|
|
|
|
- downloaded as a <code>zip</code> archive
|
|
|
|
- </a> as well.
|
|
|
|
- </p>
|
|
|
|
- </section>
|
|
|
|
-
|
|
|
|
- <hr />
|
|
|
|
-
|
|
|
|
<section id="release">
|
|
<section id="release">
|
|
<h1>Select2 4.0.0</h1>
|
|
<h1>Select2 4.0.0</h1>
|
|
|
|
|
|
@@ -157,7 +139,7 @@ slug: announcements-4.0
|
|
<p>
|
|
<p>
|
|
In Select2 4.0, the <code><select></code> element supports all core
|
|
In Select2 4.0, the <code><select></code> element supports all core
|
|
options, and support for the old
|
|
options, and support for the old
|
|
- <code><input type="hidden" /></code> has been removed. This means
|
|
|
|
|
|
+ <code><input type="hidden" /></code> has been deprecated. This means
|
|
that if you previously declared an AJAX field with some pre-selected
|
|
that if you previously declared an AJAX field with some pre-selected
|
|
options that looked like...
|
|
options that looked like...
|
|
</p>
|
|
</p>
|
|
@@ -167,7 +149,7 @@ slug: announcements-4.0
|
|
</pre>
|
|
</pre>
|
|
|
|
|
|
<p>
|
|
<p>
|
|
- Will need to be recreated as a <code><select></code> element with
|
|
|
|
|
|
+ It will need to be recreated as a <code><select></code> element with
|
|
some <code><option></code> tags that have <code>value</code>
|
|
some <code><option></code> tags that have <code>value</code>
|
|
attributes that match the old value.
|
|
attributes that match the old value.
|
|
</p>
|
|
</p>
|
|
@@ -215,6 +197,57 @@ slug: announcements-4.0
|
|
matcher function.
|
|
matcher function.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
|
|
+ <p>
|
|
|
|
+ So if your old code used a matcher that only displayed options if they
|
|
|
|
+ started with the term that was entered, it would look something like...
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+<pre class="prettyprint linenums">
|
|
|
|
+function matchStart (term, text) {
|
|
|
|
+ if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return false;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+$("select").select2({
|
|
|
|
+ matcher: matchStart
|
|
|
|
+})
|
|
|
|
+</pre>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ Then in Select2 4.0, you would need to wrap the <code>matchStart</code>
|
|
|
|
+ method (or the name of the matcher you created) with a
|
|
|
|
+ <code>oldMatcher</code> method that we have created.
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+<pre class="prettyprint linenums">
|
|
|
|
+function matchStart (term, text) {
|
|
|
|
+ if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return false;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
|
|
|
+ $("select").select2({
|
|
|
|
+ matcher: oldMatcher(matchStart)
|
|
|
|
+ })
|
|
|
|
+});
|
|
|
|
+</pre>
|
|
|
|
+
|
|
|
|
+ <p>
|
|
|
|
+ This will work for any matchers that only took in the search term and the
|
|
|
|
+ text of the option as parameters. If your matcher relied on the third
|
|
|
|
+ parameter containing the jQuery element representing the original
|
|
|
|
+ <code><option></code> tag, then you may need to slightly change
|
|
|
|
+ your matcher to expect the full JavaScript data object being passed in
|
|
|
|
+ instead. You can still retrieve the jQuery element from the data object
|
|
|
|
+ using the <code>data.element</code> property.
|
|
|
|
+ </p>
|
|
|
|
+
|
|
<h2 id="flexible-placeholders">More flexible placeholders</h2>
|
|
<h2 id="flexible-placeholders">More flexible placeholders</h2>
|
|
|
|
|
|
<p>
|
|
<p>
|
|
@@ -263,9 +296,9 @@ $("select").select2({
|
|
|
|
|
|
<p>
|
|
<p>
|
|
And Select2 will automatically display the placeholder when the value of
|
|
And Select2 will automatically display the placeholder when the value of
|
|
- the select is <code>-1</code>, which it is by default. This does not break
|
|
|
|
- the old functionality of Select2 where the placeholder option was blank by
|
|
|
|
- default.
|
|
|
|
|
|
+ the select is <code>-1</code>, which it will be by default. This does not
|
|
|
|
+ break the old functionality of Select2 where the placeholder option was
|
|
|
|
+ blank by default.
|
|
</p>
|
|
</p>
|
|
|
|
|
|
<h2 id="value-ordering">Display reflects the actual order of the values</h2>
|
|
<h2 id="value-ordering">Display reflects the actual order of the values</h2>
|