Merge pull request #2080 from ericdahl/gh-pages
Documentation (gh-pages): Fix typos, extraneous tags and a couple other minor issues.
This commit is contained in:
Igor Vaynberg
commit
6fb0cea6c6
52
index.html
52
index.html
@ -76,7 +76,7 @@ $("#e5").select2({
|
||||
else if (movie.synopsis !== undefined) {
|
||||
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
|
||||
}
|
||||
markup += "</td></tr></table>"
|
||||
markup += "</td></tr></table>";
|
||||
return markup;
|
||||
}
|
||||
|
||||
@ -174,7 +174,7 @@ $("#e10").select2({
|
||||
});
|
||||
|
||||
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
|
||||
function format(item) { return item.tag; };
|
||||
function format(item) { return item.tag; }
|
||||
|
||||
$("#e10_2").select2({
|
||||
data:{ results: data, text: 'tag' },
|
||||
@ -250,7 +250,7 @@ $("#e10_4").select2({
|
||||
var markup=template
|
||||
.replace(/\$url/g, this.html_url)
|
||||
.replace(/\$num/g, this.number)
|
||||
.replace(/\$title/g, this.title.replace("<", "<"))
|
||||
.replace(/\$title/g, this.title.replace("<", "<"));
|
||||
list.append(markup);
|
||||
});
|
||||
|
||||
@ -390,7 +390,7 @@ $("#e10_4").select2({
|
||||
<article class="row" id="multi">
|
||||
<div class="span4">
|
||||
<h3>Multi-Value Select Boxes</h3>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatically picks up on this:</p>
|
||||
<p>
|
||||
<select multiple name="e9" id="e9" style="width:300px" class="populate"></select>
|
||||
</p>
|
||||
@ -462,7 +462,7 @@ $("#e2_2").select2({
|
||||
<h3>Example Code</h3>
|
||||
<pre class="prettyprint linenums" id="code_e4"></pre>
|
||||
<p>
|
||||
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside temptlating functions:
|
||||
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside templating functions:
|
||||
</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<select>
|
||||
@ -487,7 +487,7 @@ function format(state) {
|
||||
<p>
|
||||
<input type="hidden" id="e5" style="width:300px"/>
|
||||
</p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</code></p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example Code</h3>
|
||||
@ -665,7 +665,7 @@ $("#e11")
|
||||
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevitiy)");})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})
|
||||
.on("select2-focus", function(e) { log ("focus");})
|
||||
.on("select2-blur", function(e) { log ("blur");});
|
||||
$("#e11_2")
|
||||
@ -677,7 +677,7 @@ $("#e11_2")
|
||||
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevitiy)");})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})
|
||||
.on("select2-focus", function(e) { log ("focus");})
|
||||
.on("select2-blur", function(e) { log ("blur");});
|
||||
});
|
||||
@ -761,7 +761,7 @@ $("#e11_2")
|
||||
by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma.</p>
|
||||
|
||||
<p><input type="hidden" id="e20" style="width:300px" value="brown"/></p>
|
||||
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option.</code></p>
|
||||
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option.</p>
|
||||
<p>Note that this example uses the built in <a href="#doc-tokenizer">tokenizer</a> function, but a custom one can be provided in the options.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
@ -822,7 +822,7 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="row" id="lifecycle">
|
||||
<article class="row" id="drag_drop">
|
||||
<script id="script_e15">
|
||||
$(document).ready(function () {
|
||||
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
|
||||
@ -1107,7 +1107,7 @@ $(document).ready(function () {
|
||||
<dt>element</dt><dd>Uses javascript to calculate the width of the source element.</dd>
|
||||
<dt>copy</dt><dd>Copies the value of the width style attribute set on the source element.</dd>
|
||||
<dt>resolve</dt><dd>First attempts to <u>copy</u> than falls back on <u>element</u>.</dd>
|
||||
<dt>other values</dt><dd>if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim.</dd>
|
||||
<dt>other values</dt><dd>if the width attribute contains a function it will be evaluated, otherwise the value is used verbatim.</dd>
|
||||
</dl>
|
||||
</td></tr>
|
||||
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search.</td></tr>
|
||||
@ -1230,7 +1230,7 @@ $(document).ready(function () {
|
||||
<tr><td>text</td><td>string</td><td>text of the option being matched.</td></tr>
|
||||
<tr><td>option</td><td>jquery object</td>
|
||||
<td>the <code>option</code> element we are trying to match. Only given when attached to <code>select</code>.
|
||||
Can be used to match against custom attributes on the <code>option</code> tag in addition to matching on the <code>option</code>'s text.</code></td></tr>
|
||||
Can be used to match against custom attributes on the <code>option</code> tag in addition to matching on the <code>option</code>'s text.</td></tr>
|
||||
<tr><td><returns></td><td>boolean</td><td><code>true</code> if search term matches the text, or <code>false</code> otherwise.</td></tr>
|
||||
</table>
|
||||
The default implementation is case insensitive and matches anywhere in the term:
|
||||
@ -1411,12 +1411,12 @@ $("#select").select2({
|
||||
<tr><td><returns></td><td>string (optional)</td><td>Returns the string to which the input of
|
||||
the search field should be set to. Usually this is the remainder, of any, of the string after
|
||||
the tokens have been stripped. If <code>undefined</code> or <code>null</code> is returned the
|
||||
input of the search field is unchanged.</code></td></tr>
|
||||
input of the search field is unchanged.</td></tr>
|
||||
</table>
|
||||
|
||||
The default tokenizer will only be used if the <code>tokenSeparators</code> and <code>createSearchChoice</code>
|
||||
options are specified. The default tokenizer will split the string using any separator in <code>tokenSeparators</code>
|
||||
and will create and select choice objects using <code>createSearhChoice</code> option. It will also
|
||||
and will create and select choice objects using <code>createSearchChoice</code> option. It will also
|
||||
ignore duplicates, silently swallowing those tokens.
|
||||
</td></tr>
|
||||
<tr id="doc-tokenSeparators"><td>tokenSeparators</td><td>array</td><td>
|
||||
@ -1441,9 +1441,9 @@ $("#select").select2({
|
||||
<td>Callback function that should be called with the <code>result</code> object. The result object:
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used. The object may also contain a <code>children</code>key if hierarchical data is displayed. The object may also contain a <code>disabled</code> boolean property indicating whether this result can be selected.</td></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys. The <code>id</code> attribute is required, even if custom renderers are used. The object may also contain a <code>children</code>key if hierarchical data is displayed. The object may also contain a <code>disabled</code> boolean property indicating whether this result can be selected.</td></tr>
|
||||
<tr><td>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term.</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context">options.context</code></a> parameter.</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context"><code>options.context</code></a> parameter.</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
@ -1602,7 +1602,7 @@ $("#select").select2({
|
||||
<div class="row">
|
||||
<div class="span12"><h3>val</h3></div>
|
||||
</div>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr>
|
||||
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||
@ -1626,7 +1626,7 @@ $("#select").select2({
|
||||
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>triggerChange (optional)</td><td>boolean</td><td>Whether or not a <code>change</code> event should be triggered. <code>false</code> by default.</code></td></tr>
|
||||
<tr><td>triggerChange (optional)</td><td>boolean</td><td>Whether or not a <code>change</code> event should be triggered. <code>false</code> by default.</td></tr>
|
||||
</table>
|
||||
<p><code>val</code> method invoked on a single-select with an unset value will return <code>""</code>, while a <code>val</code> method invoked on an empty multi-select will return <code>[]</code>.</p>
|
||||
|
||||
@ -1694,7 +1694,6 @@ $("#select").select2({
|
||||
<dt>added</dt><dd>The added element, if any - the full element object, not just the id.</dd>
|
||||
<dt>removed</dt><dd>The removed element, if any - the full element object, not just the id.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
@ -1702,27 +1701,23 @@ $("#select").select2({
|
||||
<h3>select2-opening</h3>
|
||||
<p>Fired before the dropdown is shown.</p>
|
||||
<p>The event listener can prevent the opening by calling <code>preventDefault()</code> on the supplied event object.</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>select2-open</h3>
|
||||
<p>Fired after the dropdown is shown.</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
<div class="span12">
|
||||
<h3>select2-highlight</h3>
|
||||
<p>Fired when a choice is highlighted in the dropdown.</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The highlighted choice object.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -1730,13 +1725,11 @@ $("#select").select2({
|
||||
<h3>select2-selecting</h3>
|
||||
<p>Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection.
|
||||
This event is used to allow the user to reject selection by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The choice object about to be selected.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -1744,7 +1737,6 @@ $("#select").select2({
|
||||
<h3>select2-clearing</h3>
|
||||
<p>Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection.
|
||||
This event is used to allow the user to reject the clear by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>For the clear button to be visible the <code>allowClear</code> option needs to be <code>true</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1753,44 +1745,38 @@ $("#select").select2({
|
||||
<h3>select2-removing</h3>
|
||||
<p>Fired when a choice is about to be removed in the dropdown/input, but before any removal of the choice has been made.
|
||||
This event is used to allow the user to reject removal by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the removing choice object.</dd>
|
||||
<dt>object</dt><dd>The choice object about to be removed.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
<div class="span12">
|
||||
<h3>select2-removed</h3>
|
||||
<p>Fired when a choice is removed or cleared.</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The highlighted choice object.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>select2-loaded</h3>
|
||||
<p>Fired when query function is done loading the data and the results list has been updated</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>items</dt><dd>data that was used to populate the results.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
<div class="span12">
|
||||
<h3>select2-focus</h3>
|
||||
<p>Fired when the control is focussed.
|
||||
<p>Fired when the control is focused.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -66,7 +66,7 @@ version: 2.1
|
||||
else if (movie.synopsis !== undefined) {
|
||||
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
|
||||
}
|
||||
markup += "</td></tr></table>"
|
||||
markup += "</td></tr></table>";
|
||||
return markup;
|
||||
}
|
||||
|
||||
@ -146,7 +146,7 @@ version: 2.1
|
||||
});
|
||||
|
||||
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
|
||||
function format(item) { return item.tag; };
|
||||
function format(item) { return item.tag; }
|
||||
|
||||
$("#e10_2").select2({
|
||||
data:{ results: data, text: 'tag' },
|
||||
@ -270,7 +270,7 @@ version: 2.1
|
||||
<article class="zebra row" id="multi">
|
||||
<div class="span4">
|
||||
<h3>Multi-Value Select Boxes</h3>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatically picks up on this:</p>
|
||||
<p>
|
||||
<select multiple name="e9" id="e9" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||
</p>
|
||||
@ -351,7 +351,7 @@ version: 2.1
|
||||
<p>
|
||||
<input type="hidden" id="e5" style="width:300px"/>
|
||||
</p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</code></p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example Code</h3>
|
||||
@ -571,7 +571,7 @@ version: 2.1
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="row" id="lifecycle">
|
||||
<article class="row" id="drag_drop">
|
||||
<script id="script_e15">
|
||||
$(document).ready(function () {
|
||||
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
|
||||
@ -762,7 +762,7 @@ version: 2.1
|
||||
<tr><td>text</td><td>string</td><td>text of the option being matched</td></tr>
|
||||
<tr><td><returns></td><td>boolean</td><td><code>true</code> if search term matches the option text, or <code>false</code> otherwise</td></tr>
|
||||
</table>
|
||||
The default implementation is case insensitive and matches anywhere in ther term:
|
||||
The default implementation is case insensitive and matches anywhere in the term:
|
||||
<code>function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }</code>
|
||||
</td></tr>
|
||||
<tr><td>formatSelection</td><td>function</td><td>
|
||||
@ -865,9 +865,9 @@ $("#tags").select2({
|
||||
<td>Callback function that should be called with the <code>result</code> object. The result object:
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used.</td></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys. The <code>id</code> attribute is required, even if custom renderers are used.</td></tr>
|
||||
<tr><td>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context">options.context</code></a> parameter.</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context"><code>options.context</code></a> parameter.</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
@ -892,7 +892,7 @@ $("#tags").select2({
|
||||
<tr><td>term</td><td>string</td><td>Search term</td></tr>
|
||||
<tr><td>page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
|
||||
<tr><td>context</td><td>object</td><td>See <a href="#doc-query-options-callback"><code>options.context</code></a> parameter to the <a href="#doc-query"><code>query</code></a> function above.</td></tr>
|
||||
<tr><td><returns></td><td>object</td><td>Object containing url paramters</td></tr>
|
||||
<tr><td><returns></td><td>object</td><td>Object containing url parameters</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>results</td><td>function</td><td>
|
||||
@ -926,7 +926,7 @@ $("#tags").select2({
|
||||
<div class="row">
|
||||
<div class="span12"><h3>val</h3></div>
|
||||
</div>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr>
|
||||
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||
@ -953,7 +953,7 @@ $("#tags").select2({
|
||||
|
||||
</td></tr>
|
||||
</table>
|
||||
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
|
||||
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"California"});</pre>
|
||||
|
||||
<div class="row">
|
||||
<div class="span12"><h3>destroy</h3></div>
|
||||
|
||||
@ -415,7 +415,7 @@ $("#e8_set").click(
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||
<tr><td>term</td><td>string</td><td>Search term</td></tr>
|
||||
<tr><td>vars</td><td>object</td><td>The vars object from the previous search's result</td></tr>
|
||||
<tr><td><returns></td><td>object</td><td>Object containing url paramters</td></tr>
|
||||
<tr><td><returns></td><td>object</td><td>Object containing url parameters</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>results</td><td>function</td><td>
|
||||
@ -442,7 +442,7 @@ $("#e8_set").click(
|
||||
</tr>
|
||||
<tr><td>value (optional)</td><td>object</td><td>Result object for the new selection, or the <code>id</code> attribute of a loaded result object</td></tr>
|
||||
</table>
|
||||
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
|
||||
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"California"});</pre>
|
||||
|
||||
<div class="row">
|
||||
<div class="span12"><h2>Events</h2></div>
|
||||
@ -459,7 +459,7 @@ $("#e8_set").click(
|
||||
<div class="row">
|
||||
<div class="span12"><h3>cancelled</h3></div>
|
||||
</div>
|
||||
<p>Signalled when the user cancells the selection of a result. For example, when ESC is pressed after the dropdown has been opened</p>
|
||||
<p>Signalled when the user cancels the selection of a result. For example, when ESC is pressed after the dropdown has been opened</p>
|
||||
<div class="row">
|
||||
<div class="span12"><h3>selected</h3></div>
|
||||
</div>
|
||||
|
||||
@ -76,7 +76,7 @@ $("#e5").select2({
|
||||
else if (movie.synopsis !== undefined) {
|
||||
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
|
||||
}
|
||||
markup += "</td></tr></table>"
|
||||
markup += "</td></tr></table>";
|
||||
return markup;
|
||||
}
|
||||
|
||||
@ -174,7 +174,7 @@ $("#e10").select2({
|
||||
});
|
||||
|
||||
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
|
||||
function format(item) { return item.tag; };
|
||||
function format(item) { return item.tag; }
|
||||
|
||||
$("#e10_2").select2({
|
||||
data:{ results: data, text: 'tag' },
|
||||
@ -263,7 +263,7 @@ $("#e10_4").select2({
|
||||
var markup=template
|
||||
.replace(/\$url/g, this.html_url)
|
||||
.replace(/\$num/g, this.number)
|
||||
.replace(/\$title/g, this.title.replace("<", "<"))
|
||||
.replace(/\$title/g, this.title.replace("<", "<"));
|
||||
list.append(markup);
|
||||
});
|
||||
|
||||
@ -403,7 +403,7 @@ $("#e10_4").select2({
|
||||
<article class="row" id="multi">
|
||||
<div class="span4">
|
||||
<h3>Multi-Value Select Boxes</h3>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatically picks up on this:</p>
|
||||
<p>
|
||||
<select multiple name="e9" id="e9" style="width:300px" class="populate"></select>
|
||||
</p>
|
||||
@ -475,7 +475,7 @@ $("#e2_2").select2({
|
||||
<h3>Example Code</h3>
|
||||
<pre class="prettyprint linenums" id="code_e4"></pre>
|
||||
<p>
|
||||
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside temptlating functions:
|
||||
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside templating functions:
|
||||
</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<select>
|
||||
@ -500,7 +500,7 @@ function format(state) {
|
||||
<p>
|
||||
<input type="hidden" id="e5" style="width:300px"/>
|
||||
</p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</code></p>
|
||||
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
<h3>Example Code</h3>
|
||||
@ -672,7 +672,7 @@ $("#e11")
|
||||
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevitiy)");})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})
|
||||
.on("select2-focus", function(e) { log ("focus");})
|
||||
.on("select2-blur", function(e) { log ("blur");});
|
||||
$("#e11_2")
|
||||
@ -684,7 +684,7 @@ $("#e11_2")
|
||||
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevitiy)");})
|
||||
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})
|
||||
.on("select2-focus", function(e) { log ("focus");})
|
||||
.on("select2-blur", function(e) { log ("blur");});
|
||||
});
|
||||
@ -768,7 +768,7 @@ $("#e11_2")
|
||||
by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma.</p>
|
||||
|
||||
<p><input type="hidden" id="e20" style="width:300px" value="brown"/></p>
|
||||
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option.</code></p>
|
||||
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option.</p>
|
||||
<p>Note that this example uses the built in <a href="#doc-tokenizer">tokenizer</a> function, but a custom one can be provided in the options.</p>
|
||||
</div>
|
||||
<div class="span8">
|
||||
@ -829,7 +829,7 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="row" id="lifecycle">
|
||||
<article class="row" id="drag_drop">
|
||||
<script id="script_e15">
|
||||
$(document).ready(function () {
|
||||
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
|
||||
@ -1142,7 +1142,7 @@ $(document).ready(function () {
|
||||
<dt>element</dt><dd>Uses javascript to calculate the width of the source element.</dd>
|
||||
<dt>copy</dt><dd>Copies the value of the width style attribute set on the source element.</dd>
|
||||
<dt>resolve</dt><dd>First attempts to <u>copy</u> than falls back on <u>element</u>.</dd>
|
||||
<dt>other values</dt><dd>if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim.</dd>
|
||||
<dt>other values</dt><dd>if the width attribute contains a function it will be evaluated, otherwise the value is used verbatim.</dd>
|
||||
</dl>
|
||||
</td></tr>
|
||||
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search.</td></tr>
|
||||
@ -1265,7 +1265,7 @@ $(document).ready(function () {
|
||||
<tr><td>text</td><td>string</td><td>text of the option being matched.</td></tr>
|
||||
<tr><td>option</td><td>jquery object</td>
|
||||
<td>the <code>option</code> element we are trying to match. Only given when attached to <code>select</code>.
|
||||
Can be used to match against custom attributes on the <code>option</code> tag in addition to matching on the <code>option</code>'s text.</code></td></tr>
|
||||
Can be used to match against custom attributes on the <code>option</code> tag in addition to matching on the <code>option</code>'s text.</td></tr>
|
||||
<tr><td><returns></td><td>boolean</td><td><code>true</code> if search term matches the text, or <code>false</code> otherwise.</td></tr>
|
||||
</table>
|
||||
The default implementation is case insensitive and matches anywhere in the term:
|
||||
@ -1466,12 +1466,12 @@ $("#select").select2({
|
||||
<tr><td><returns></td><td>string (optional)</td><td>Returns the string to which the input of
|
||||
the search field should be set to. Usually this is the remainder, of any, of the string after
|
||||
the tokens have been stripped. If <code>undefined</code> or <code>null</code> is returned the
|
||||
input of the search field is unchanged.</code></td></tr>
|
||||
input of the search field is unchanged.</td></tr>
|
||||
</table>
|
||||
|
||||
The default tokenizer will only be used if the <code>tokenSeparators</code> and <code>createSearchChoice</code>
|
||||
options are specified. The default tokenizer will split the string using any separator in <code>tokenSeparators</code>
|
||||
and will create and select choice objects using <code>createSearhChoice</code> option. It will also
|
||||
and will create and select choice objects using <code>createSearchChoice</code> option. It will also
|
||||
ignore duplicates, silently swallowing those tokens.
|
||||
</td></tr>
|
||||
<tr id="doc-tokenSeparators"><td>tokenSeparators</td><td>array</td><td>
|
||||
@ -1496,9 +1496,9 @@ $("#select").select2({
|
||||
<td>Callback function that should be called with the <code>result</code> object. The result object:
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> property is required</code>, even if custom renderers are used. The object may also contain a <code>children</code> key if hierarchical data is displayed. The object may also contain a <code>disabled</code> boolean property indicating whether this result can be selected.</td></tr>
|
||||
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys. The <code>id</code> property is required, even if custom renderers are used. The object may also contain a <code>children</code> key if hierarchical data is displayed. The object may also contain a <code>disabled</code> boolean property indicating whether this result can be selected.</td></tr>
|
||||
<tr><td>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term.</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context">options.context</code></a> parameter.</td></tr>
|
||||
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context"><code>options.context</code></a> parameter.</td></tr>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
@ -1689,7 +1689,7 @@ $("#e1").select2({
|
||||
<div class="row">
|
||||
<div class="span12"><h3>val</h3></div>
|
||||
</div>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<tr>
|
||||
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||
@ -1713,7 +1713,7 @@ $("#e1").select2({
|
||||
|
||||
</table>
|
||||
</td></tr>
|
||||
<tr><td>triggerChange (optional)</td><td>boolean</td><td>Whether or not a <code>change</code> event should be triggered. <code>false</code> by default.</code></td></tr>
|
||||
<tr><td>triggerChange (optional)</td><td>boolean</td><td>Whether or not a <code>change</code> event should be triggered. <code>false</code> by default.</td></tr>
|
||||
</table>
|
||||
<p><code>val</code> method invoked on a single-select with an unset value will return <code>""</code>, while a <code>val</code> method invoked on an empty multi-select will return <code>[]</code>.</p>
|
||||
|
||||
@ -1781,7 +1781,6 @@ $("#e1").select2({
|
||||
<dt>added</dt><dd>The added element, if any - the full element object, not just the id.</dd>
|
||||
<dt>removed</dt><dd>The removed element, if any - the full element object, not just the id.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
@ -1789,27 +1788,23 @@ $("#e1").select2({
|
||||
<h3>select2-opening</h3>
|
||||
<p>Fired before the dropdown is shown.</p>
|
||||
<p>The event listener can prevent the opening by calling <code>preventDefault()</code> on the supplied event object.</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>select2-open</h3>
|
||||
<p>Fired after the dropdown is shown.</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
<div class="span12">
|
||||
<h3>select2-highlight</h3>
|
||||
<p>Fired when a choice is highlighted in the dropdown.</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The highlighted choice object.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -1817,13 +1812,11 @@ $("#e1").select2({
|
||||
<h3>select2-selecting</h3>
|
||||
<p>Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection.
|
||||
This event is used to allow the user to reject selection by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The choice object about to be selected.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -1831,7 +1824,6 @@ $("#e1").select2({
|
||||
<h3>select2-clearing</h3>
|
||||
<p>Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection.
|
||||
This event is used to allow the user to reject the clear by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>For the clear button to be visible the <code>allowClear</code> option needs to be <code>true</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1840,38 +1832,32 @@ $("#e1").select2({
|
||||
<h3>select2-removing</h3>
|
||||
<p>Fired when a choice is about to be removed in the dropdown/input, but before any removal of the choice has been made.
|
||||
This event is used to allow the user to reject removal by calling <code>event.preventDefault()</code></p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the removing choice object.</dd>
|
||||
<dt>object</dt><dd>The choice object about to be removed.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
<div class="span12">
|
||||
<h3>select2-removed</h3>
|
||||
<p>Fired when a choice is removed or cleared.</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>val</dt><dd>The id of the highlighted choice object.</dd>
|
||||
<dt>object</dt><dd>The highlighted choice object.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h3>select2-loaded</h3>
|
||||
<p>Fired when query function is done loading the data and the results list has been updated</p>
|
||||
</p>
|
||||
<p>The event object contains the following custom properties:
|
||||
<dl>
|
||||
<dt>items</dt><dd>data that was used to populate the results.</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row zebra">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user