RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-09 16:49:24 +03:00
Code Issues Projects Releases Wiki Activity

Switched 4.0 announcement to Jekyll highlighting

Browse Source
This commit is contained in:
Kevin Brown 2016-01-30 18:30:57 -05:00
parent 74387b9863
commit d5a76aab26
1 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
docs/announcements-4.0.html
View File

@ -152,9 +152,9 @@ slug: announcements-4.0
options that looked like… options that looked like…
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input type="hidden" name="select-boxes" value="1,2,4,6" /&gt; <input type="hidden" name="select-boxes" value="1,2,4,6" />
</pre> {% endhighlight %}
<p> <p>
It will need to be recreated as a <code>&lt;select&gt;</code> element with It will need to be recreated as a <code>&lt;select&gt;</code> element with
@ -162,14 +162,14 @@ slug: announcements-4.0
attributes that match the old value. attributes that match the old value.
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;select name="select-boxes" multiple="multiple"&gt; <select name="select-boxes" multiple="multiple">
&lt;option value="1" selected="selected"&gt;Select2&lt;/option&gt; <option value="1" selected="selected">Select2</option>
&lt;option value="2" selected="selected"&gt;Chosen&lt;/option&gt; <option value="2" selected="selected">Chosen</option>
&lt;option value="4" selected="selected"&gt;selectize.js&lt;/option&gt; <option value="4" selected="selected">selectize.js</option>
&lt;option value="6" selected="selected"&gt;typeahead.js&lt;/option&gt; <option value="6" selected="selected">typeahead.js</option>
&lt;/select&gt; </select>
</pre> {% endhighlight %}
<p> <p>
The options that you create should have <code>selected="selected"</code> The options that you create should have <code>selected="selected"</code>
@ -210,7 +210,7 @@ slug: announcements-4.0
started with the term that was entered, it would look something like… started with the term that was entered, it would look something like…
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
function matchStart (term, text) { function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true; return true;
@ -222,7 +222,7 @@ function matchStart (term, text) {
$("select").select2({ $("select").select2({
matcher: matchStart matcher: matchStart
}) })
</pre> {% endhighlight %}
<p> <p>
Then in Select2 4.0, you would need to wrap the <code>matchStart</code> Then in Select2 4.0, you would need to wrap the <code>matchStart</code>
@ -230,7 +230,7 @@ $("select").select2({
<code>oldMatcher</code> method that we have created. <code>oldMatcher</code> method that we have created.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
function matchStart (term, text) { function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true; return true;
@ -244,7 +244,7 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
matcher: oldMatcher(matchStart) matcher: oldMatcher(matchStart)
}) })
}); });
</pre> {% endhighlight %}
<p> <p>
This will work for any matchers that only took in the search term and the This will work for any matchers that only took in the search term and the
@ -280,12 +280,12 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
value of <code>-1</code>) is the placeholder option… value of <code>-1</code>) is the placeholder option…
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;select&gt; <select>
&lt;option value="-1" selected="selected"&gt;Select an option&lt;/option&gt; <option value="-1" selected="selected">Select an option</option>
&lt;option value="1"&gt;Something else&lt;/option&gt; <option value="1">Something else</option>
&lt;/select&gt; </select>
</pre> {% endhighlight %}
<p> <p>
You would have previously had to get the placeholder option through the You would have previously had to get the placeholder option through the
@ -293,14 +293,14 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
<code>placeholder</code> option by setting an <code>id</code>. <code>placeholder</code> option by setting an <code>id</code>.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$("select").select2({ $("select").select2({
placeholder: { placeholder: {
id: "-1", id: "-1",
placeholder: "Select an option" placeholder: "Select an option"
} }
}) })
</pre> {% endhighlight %}
<p> <p>
And Select2 will automatically display the placeholder when the value of And Select2 will automatically display the placeholder when the value of
@ -359,15 +359,17 @@ $("select").select2({
the <code>id</code> and <code>text</code> matching the selected value. the <code>id</code> and <code>text</code> matching the selected value.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
initSelection : function (element, callback) { {
initSelection : function (element, callback) {
var data = []; var data = [];
$(element.val()).each(function () { $(element.val()).each(function () {
data.push({id: this, text: this}); data.push({id: this, text: this});
}); });
callback(data); callback(data);
}
} }
</pre> {% endhighlight %}
<p> <p>
When using the new <code>current</code> method of the custom data adapter, When using the new <code>current</code> method of the custom data adapter,
@ -378,7 +380,7 @@ initSelection : function (element, callback) {
remote data source). remote data source).
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$.fn.select2.amd.require([ $.fn.select2.amd.require([
'select2/data/array', 'select2/data/array',
'select2/utils' 'select2/utils'
@ -411,7 +413,7 @@ $.fn.select2.amd.require([
dataAdapter: CustomData dataAdapter: CustomData
}); });
} }
</pre> {% endhighlight %}
<p> <p>
The new <code>current</code> method of the data adapter works in a similar The new <code>current</code> method of the data adapter works in a similar
@ -436,7 +438,7 @@ $.fn.select2.amd.require([
the changes. the changes.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
var $element = $('select').select2(); // the select element you are working with var $element = $('select').select2(); // the select element you are working with
var $request = $.ajax({ var $request = $.ajax({
@ -460,7 +462,7 @@ $request.then(function (data) {
// Update the selected options that are displayed // Update the selected options that are displayed
$element.trigger('change'); $element.trigger('change');
}); });
</pre> {% endhighlight %}
<h3 id="query-to-data-adapter"> <h3 id="query-to-data-adapter">
Custom data adapters instead of <code>query</code> Custom data adapters instead of <code>query</code>
@ -487,8 +489,9 @@ $request.then(function (data) {
number of times. number of times.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
query: function (query) { {
query: function (query) {
var data = {results: []}, i, j, s; var data = {results: []}, i, j, s;
for (i = 1; i < 5; i++) { for (i = 1; i < 5; i++) {
s = ""; s = "";
@ -496,8 +499,9 @@ query: function (query) {
data.results.push({id: query.term + i, text: s}); data.results.push({id: query.term + i, text: s});
} }
query.callback(data); query.callback(data);
}
} }
</pre> {% endhighlight %}
<p> <p>
This has been replaced by custom data adapters which define a similarly This has been replaced by custom data adapters which define a similarly
@ -505,7 +509,7 @@ query: function (query) {
below as an example. below as an example.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$.fn.select2.amd.require([ $.fn.select2.amd.require([
'select2/data/array', 'select2/data/array',
'select2/utils' 'select2/utils'
@ -541,7 +545,7 @@ $.fn.select2.amd.require([
dataAdapter: CustomData dataAdapter: CustomData
}); });
} }
</pre> {% endhighlight %}
<p> <p>
The new <code>query</code> method of the data adapter is very similar to The new <code>query</code> method of the data adapter is very similar to
@ -602,7 +606,7 @@ $.fn.select2.amd.require([
<code>text</code> and <code>id</code> properties to the new ones. <code>text</code> and <code>id</code> properties to the new ones.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
var data = $.map([ var data = $.map([
{ {
pk: 1, pk: 1,
@ -618,7 +622,7 @@ var data = $.map([
return obj; return obj;
}); });
</pre> {% endhighlight %}
<p> <p>
This will result in an array of data objects that have the <code>id</code> This will result in an array of data objects that have the <code>id</code>
@ -684,17 +688,17 @@ var data = $.map([
If you previously declared the list of tags as… If you previously declared the list of tags as…
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;select data-select2-tags='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]'&gt;&lt;/select&gt; <select data-select2-tags='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]'></select>
</pre> {% endhighlight %}
<p> <p>
…then you should now declare it as… …then you should now declare it as…
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;select data-data='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]' data-tags="true"&gt;&lt;/select&gt; <select data-data='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]' data-tags="true"></select>
</pre> {% endhighlight %}
<h2 id="removed-methods">Deprecated and removed methods</h2> <h2 id="removed-methods">Deprecated and removed methods</h2>
@ -719,9 +723,9 @@ var data = $.map([
<code>.trigger("change")</code> on the element. <code>.trigger("change")</code> on the element.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1"); $("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");
</pre> {% endhighlight %}
<h3>.select2("enable")</h3> <h3>.select2("enable")</h3>
@ -733,9 +737,9 @@ $("select").val("1").trigger("change"); // instead of $("select").select2("val",
completely removed in Select2 4.1. completely removed in Select2 4.1.
</p> </p>
<pre class="prettyprint linenums"> {% highlight js linenos %}
$("select").prop("disabled", true); // instead of $("select").enable(false); $("select").prop("disabled", true); // instead of $("select").enable(false);
</pre> {% endhighlight %}
</section> </section>
</div> </div>
@ -746,7 +750,3 @@ $("select").prop("disabled", true); // instead of $("select").enable(false);
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript">
prettyPrint();
</script>