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

release 3.0

Browse Source
This commit is contained in:
Igor Vaynberg 2012-07-31 21:36:34 -07:00
parent 1e7cb29b03
commit c75865a660
9 changed files with 4985 additions and 854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

460
index.html
View File

@ -1,14 +1,21 @@
---
layout: main
title: Select2 2.1
title: Select2 3.0
group: navigation
version: 2.1
version: 3.0
---
<link href="select2-2.1/select2.css" rel="stylesheet"/>
<script src="select2-2.1/select2.js"></script>
<link href="select2-3.0/select2.css" rel="stylesheet"/>
<script src="select2-3.0/select2.js"></script>
<script id="script_e1">
$(function() {
var opts=$("#source").html(), opts2="<option></option>"+opts;
$("select.populate").each(function() { var e=$(this); e.html(e.hasClass("placeholder")?opts2:opts); });
$(".examples article:odd").addClass("zebra");
});
$(document).ready(function() {
$("#e1").select2();
});
@ -25,6 +32,7 @@ version: 2.1
<script id="script_e4">
$(document).ready(function() {
function format(state) {
if (!state.id) return state.text; // optgroup
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
$("#e4").select2({
@ -79,7 +87,7 @@ version: 2.1
<script id="script_e6">
$(document).ready(function() {
$("#e6").select2({
placeholder: {title: "Search for a movie", id: ""},
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
@ -97,7 +105,8 @@ version: 2.1
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
});
</script>
@ -105,7 +114,7 @@ version: 2.1
<script id="script_e7">
$(document).ready(function() {
$("#e7").select2({
placeholder: {title: "Search for a movie", id: ""},
placeholder: "Search for a movie",
minimumInputLength: 3,
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
@ -127,7 +136,8 @@ version: 2.1
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
});
</script>
@ -181,10 +191,11 @@ version: 2.1
<li><a href="#infinite">Infinite Scrolling of Remote/AJAX data</a></li>
<li><a href="#tags">Tagging Support</a></li>
<li><a href="#programmatic">Programmatic control</a></li>
<li><a href="#event_change">Events: Change</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#event_ext_change">Events: Reacting to External Changes</a></li>
<li><a href="#disabled">Disabled Mode</a></li>
<li><a href="#matcher">Custom Matcher Function</a></li>
<li><a href="#responsive">Responsive Design</a></li>
</ul>
</li>
<li><a href="#documentation">Documentation</a></li>
@ -195,22 +206,21 @@ version: 2.1
<section id="changelog">
<h2>Changelog from 2.0</h2>
<h2>Changelog from 2.x</h2>
<div class="row"><div class="span12">
<ul>
<li>Added support for disabled mode. See <a href="#disabled">Disabled Mode</a> example</li>
<li>Added ability to provide custom matcher functions. See <a href="#matcher">Custom Matcher Function</a> example</li>
<li>Minimum required jQuery version bumped to 1.4.4</li>
</ul>
</div></div>
<h2>Changelog from 1.0</h2>
<div class="row"><div class="span12">
<ul>
<li>Support for selection of multiple values. See <code>multiple</code> option in the docs.</li>
<li>Built-in tagging support. See the <strong>Tagging</strong> example.</li>
<li>Ability to reset back to placeholder once a selection has been made. See <code>allowClear</code> option in the docs.</li>
<li>Simplified paging of remote datasets by tracking the page number automatically.</li>
<li>Minimum required jQuery version changed from 1.7+ to 1.4.2</li>
<li>Dropdown <code>div</code> is now appended directly to <code>body</code> and is absolutely positioned. This should allow the dropdown to overlap height-constrained containers such as modal windows.</li>
<li><code>Optgroup</code>s are now supported in <code>select</code>s. N-level deep nesting of results is supported when attached to <code>input[type=hidden]</code>, see the new <a href="#doc-query">children</a> property described in the docs.</li>
<li>Signature of <code>initSeletion</code> has changed to support initialization from asynchronous requests.</li>
<li>Dropdown will now open below or above the control depending on available screen space. No more scrolling the page to see to see all matched results.</li>
<li>Signature of <code>formatSelection</code> and <code>formatResult</code> changed in a backwards compatible way to support more powerful constructs than supported by strings alone.</li>
<li>Separator in multi-valued selects is now cofigurable, <code>,</code> still the default. See <code>separator</code> option in the docs.</li>
<li>Matching is now customizable. See <a href="#doc-matcher">matcher</a> function in the docs and the <a href="#matcher">Custom Matcher</a> example.</li>
<li><code>change</code> event now specifies which elements were added/removed</li>
<li><code>width</code> option now supports various strategies instead of always being copied from the source element</li>
<li>Clicks on a <code>label</code> associated with the source element are now redirected to Select2.</li>
<li><code>val</code> will now only accept ids, if you want to specify the full object for the selection use the new <code>data</code> method instead. <code>val</code> will also now only work on non-selects if <code>initSelection</code> was specified.</li>
<li>It is now possible to limit the number of options that can be selected in a multi-select component. See the <a href="#maximumSelectionSize">Maximum Selection Size</a> example</li>
</ul>
</div></div>
</section>
@ -218,7 +228,7 @@ version: 2.1
<section>
<h2>Browser Compatibility</h2>
<ul>
<li>IE 8+ (7 mostly works except for <a href="https://github.com/ivaynberg/select2/issues/37">issue with z-index</a>)</li>
<li>IE 7+</li>
<li>Chrome 8+</li>
<li>Firefox 3.5+</li>
<li>Safari 3+</li>
@ -226,7 +236,7 @@ version: 2.1
</ul>
</section>
<section>
<section class="examples">
<div class="row">
<div class="span12">
<h2>Examples</h2>
@ -239,10 +249,67 @@ version: 2.1
<div class="span4">
<h3>The Basics</h3>
<p>Select2 can take a regular select box like this:</p>
<p><select 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></p>
<p><select style="width:300px" id="source">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option><option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
<option value="VT">Vermont</option><option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</p>
<p>and turns it into:</p>
<p>
<select id="e1" 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/>
<select id="e1" class="populate" style="width:300px"></select>
</p>
<p>with support for quick option filtering via a search box</p>
</div>
@ -267,12 +334,12 @@ version: 2.1
</div>
</article>
<article class="zebra row" id="multi">
<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>
<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/>
<select multiple name="e9" id="e9" style="width:300px" class="populate"></select>
</p>
</div>
<div class="span8">
@ -299,10 +366,10 @@ version: 2.1
<h3>Placeholders</h3>
<p>A placeholder value can be defined and will be displayed until a selection is made:</p>
<p>
<select id="e2" style="width:300px"><option></option><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/>
<select id="e2" style="width:300px" class="populate placeholder"></select><br/>
</p>
<p>
<select id="e2_2" multiple="multiple" style="width:300px"><option></option><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/>
<select id="e2_2" multiple="multiple" style="width:300px" class="populate placeholder"></select><br/>
</p>
<p>The placeholder can be declared via a <code>data-placeholder</code> attribute attached to the <code>select</code>, or via the <code>placeholder</code> configuration element as seen in the example code</p>
<p>Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.</p>
@ -315,12 +382,12 @@ version: 2.1
</div>
</article>
<article class="zebra row" id="minimum">
<article class="row" id="minimum">
<div class="span4">
<h3>Minimum Input</h3>
<p>Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:</p>
<p>
<select id="e3" 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/>
<select id="e3" style="width:300px" class="populate"></select><br/>
</p>
</div>
<div class="span8">
@ -334,16 +401,32 @@ version: 2.1
<h3>Templating</h3>
<p>Various display options of the Select2 component can be changed:</p>
<p>
<select id="e4" 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/>
<select id="e4" style="width:300px" class="populate"></select><br/>
</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e4"></pre>
<p>
You can set <code>data-</code> attributes to <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) and use them inside temptlating functions:
</p>
<pre class="prettyprint linenums">
&lt;select&gt;
&lt;option value="0" data-foo="bar"&gt;option one&lt;/option&gt;
...
&lt;/select&gt;
</pre>
<pre class="prettyprint linenums">
function format(state) {
var originalOption = state.element;
return "&lt;img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' /&gt;" + state.text;
}
</pre>
</div>
</article>
<article class="zebra row" id="data">
<article class="row" id="data">
<div class="span4">
<h3>Loading Data</h3>
<p>Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:</p>
@ -359,6 +442,28 @@ version: 2.1
</div>
</article>
<script id="script_e19">
$(document).ready(function() {
$("#e19").select2({ maximumSelectionSize: 3 });
});
</script>
<article class="row" id="maximumSelectionSize">
<div class="span4">
<h3>Maximum Selection Size</h3>
<p>Select2 allows the developer to limit the number of items that can be selected in a multi-select control.
In the example below only 3 or less items can be selected.</p>
<p>
<select multiple class="populate" id="e19" style="width:300px"></select>
</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e19">
</pre>
</div>
</article>
<article class="row" id="data_array">
<div class="span4">
<h3>Loading Array Data</h3>
@ -383,7 +488,7 @@ version: 2.1
</div>
</article>
<article class="zebra row" id="ajax">
<article class="row" id="ajax">
<div class="span12">
<h3>Loading Remote Data</h3>
<p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p>
@ -413,17 +518,23 @@ version: 2.1
</div>
</article>
<article class="zebra row" id="programmatic">
<article class="row" id="programmatic">
<script id="script_e8">
$(document).ready(function() {
$("#e8").select2();
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
$("#e8_cl").click(function() { $("#e8").select2("val", ""); });
$("#e8_get2").click(function () { alert("Selected data is: "+JSON.stringify($("#e8").select2("data")));});
$("#e8_set2").click(function () { $("#e8").select2("data", {id: "CA", text: "California"}); });
$("#e8_open").click(function () { $("#e8").select2("open"); });
$("#e8_close").click(function () { $("#e8").select2("close"); });
$("#e8_2").select2();
$("#e8_2_get").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});
$("#e8_2_set").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });
$("#e8_2_get2").click(function () { alert("Selected value is: "+JSON.stringify($("#e8_2").select2("data")));});
$("#e8_2_set2").click(function () { $("#e8_2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });
$("#e8_2_cl").click(function() { $("#e8_2").select2("val", ""); });
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
});
@ -434,20 +545,26 @@ version: 2.1
<p>
<input type="button" class="btn-primary" id="e8_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_set" value="Set to California"/>
<input type="button" class="btn-info" id="e8_cl" value="Clear"/>
<input type="button" class="btn-primary" id="e8_get2" value="Alert selected using data"/>
<input type="button" class="btn-info" id="e8_set2" value="Set to California using data"/>
<input type="button" class="btn-warning" id="e8_open" value="Open"/>
<input type="button" class="btn-warning" id="e8_close" value="Close"/>
</p>
<p>
<select id="e8" 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/>
<select id="e8" style="width:300px" class="populate"></select><br/>
</p>
<p>
<input type="button" class="btn-primary" id="e8_2_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_2_set" value="Set to California and Massachusetts"/>
<input type="button" class="btn-primary" id="e8_2_get2" value="Alert selected value using data"/>
<input type="button" class="btn-info" id="e8_2_set2" value="Set to California and Massachusetts using data"/>
<input type="button" class="btn-info" id="e8_2_cl" value="Clear"/>
<input type="button" class="btn-warning" id="e8_2_open" value="Open"/>
<input type="button" class="btn-warning" id="e8_2_close" value="Close"/>
</p>
<p>
<select id="e8_2" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>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/>
<select id="e8_2" multiple style="width:300px" class="populate"></select><br/>
</p>
</div>
<div class="span8">
@ -456,7 +573,7 @@ version: 2.1
</div>
</article>
<article class="row" id="event_change">
<article class="row" id="events">
<script id="script_e11">
$(document).ready(function () {
$("#e11").select2({
@ -469,26 +586,31 @@ version: 2.1
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function show() {
var e=$("<div style='background-color:yellow;'>change fired</div>");
function log(e) {
var e=$("<li>"+e+"</li>");
$("#events_11").append(e);
e.animate({opacity:0}, 1000, 'linear', function() { e.remove(); });
};
$("#e11").bind("change", show);
$("#e11_2").bind("change", show);
e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });
}
$("#e11")
.on("change", function(e) { log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
.on("open", function() { log("open"); });
$("#e11_2")
.on("change", function(e) { log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
.on("open", function() { log("open"); });
});
</script>
<div class="span4">
<h3>Change Event</h3>
<h3>Events</h3>
<p>Select2 triggers the <code>change</code> event on the original element whenever its value is changed by
<p><code>change</code> event is triggered on the original element whenever its value is changed by
the user</p>
<p><code>open</code> event is triggered on the original element whenever the dropdown needs to be opened</p>
<p><input type="hidden" id="e11" style="width:300px"/></p>
<p><input type="hidden" id="e11_2" style="width:300px"/></p>
<p id="events_11"></p>
<ul id="events_11"></ul>
</div>
<div class="span8">
<h3>Example Code</h3>
@ -496,7 +618,7 @@ version: 2.1
</pre>
</div>
</article>
<article class="row zebra" id="tags">
<article class="row" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
@ -532,7 +654,7 @@ version: 2.1
<p>Select2 can react to external value changes and keep its selection in-sync. This feature allows
Select2 to work seamlessly with front-end frameworks that use data binding between ui components
and model values.</p>
<p><select id="e13" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>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>
<p><select id="e13" multiple style="width:300px" class="populate"></select><br/></p>
<p><input type="button" id="e13_ca" class="btn btn-primary" value="Select California"/> <input type="button" id="e13_ak_co" class="btn btn-primary"value="Select Alaska and Colorado"/></p>
<p class="alert alert-alert">This feature is only available when initSelection() function is provided in
the options. This function is needed to map the choice ids set on the element to objects used by
@ -546,10 +668,10 @@ version: 2.1
</div>
</article>
<article class="row zebra" id="lifecycle">
<article class="row" id="lifecycle">
<script id="script_e14">
$(document).ready(function () {
$("#e14").select2();
$("#e14").val(["AL","AZ"]).select2();
$("#e14_init").click(function() { $("#e14").select2(); });
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
});
@ -560,7 +682,7 @@ version: 2.1
<p>
</p>
<p><select id="e14" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>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>
<p><select id="e14" multiple style="width:300px" class="populate"></select><br/></p>
<p><input type="button" id="e14_init" class="btn btn-primary" value="Init"/> <input type="button" id="e14_destroy" class="btn btn-warning"value="Destroy"/></p>
</div>
<div class="span8">
@ -600,7 +722,7 @@ version: 2.1
</article>
<article class="row zebra" id="disabled">
<article class="row" id="disabled">
<script id="script_e16">
$(document).ready(function () {
$("#e16").select2();
@ -611,8 +733,8 @@ version: 2.1
</script>
<div class="span4">
<h3>Select2 Disabled Mode</h3>
<p><select disabled="disabled" id="e16" style="width:300px"><option value="AL" selected>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>
<p><select disabled="disabled" id="e16_2" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>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>
<p><select disabled="disabled" id="e16" style="width:300px" class="populate"></select><br/></p>
<p><select disabled="disabled" id="e16_2" multiple style="width:300px" class="populate"></select><br/></p>
<p><input type="button" id="e16_enable" class="btn btn-primary" value="Enable"/> <input type="button" id="e16_disable" class="btn btn-warning"value="Disable"/></p>
</div>
<div class="span8">
@ -627,13 +749,25 @@ version: 2.1
$(document).ready(function () {
$("#e17").select2({
matcher: function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())==0; }
});
// <select id="e17_2" style="width:300px">
// <option alt="pink">red</option>
// <option alt="cyan">blue</option>
// </select>
$("#e17_2").select2({
matcher: function(term, text, opt) {
return text.toUpperCase().indexOf(term.toUpperCase())>=0
|| opt.attr("alt").toUpperCase().indexOf(term.toUpperCase())>=0;
}
});
});
</script>
<div class="span4">
<h3>Custom Matcher</h3>
<p>Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere</p>
<p><select id="e17" style="width:300px"><option value="AL" selected>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>
<p><select id="e17" style="width:300px" class="populate"></select><br/></p>
<p>The dropdown below matches on custom attributes of the <code>option</code> tag. For example, the `blue` option can be matched by entering either `blue` or `cyan`.</p>
<p><select id="e17_2" style="width:300px"><option alt="pink">red</option><option alt="cyan">blue</option></select></p>
</div>
<div class="span8">
<h3>Example Code</h3>
@ -642,6 +776,26 @@ version: 2.1
</div>
</article>
<article class="row" id="responsive">
<script id="script_e18">
$(document).ready(function () {
$("#e18,#e18_2").select2();
});
</script>
<div class="span12">
<h3>Responsive Design - Percent Width</h3>
<p>Select2's width can be set to a percentage of its parent to support responsive design. The two Select2 boxes below are styled to 50% and 75% width respectively.</p>
<p><select id="e18" style="width:50%" class="populate"></select><br/></p>
<p><select multiple="multiple" id="e18_2" style="width:75%" placeholder="Select a state" class="populate placeholder"></select><br/></p>
<p class="alert alert-warning">Select2 will do its best to resolve the percent width specified via a css class, but it is not always possible. The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.</p>
</div>
<div class="span12">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e18">
</pre>
</div>
</article>
</section>
@ -664,6 +818,16 @@ version: 2.1
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
<tr><td>width</td><td>string</td><td>
Controls the <code>width</code> style attribute of the Select2 container div. The following values are supported:
<dl>
<dt>off</dt><dd>No width attribute will be set. Keep in mind that the container div copies classes from the source element so setting the width attribute may not always be necessary.</dd>
<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>
</dl>
</td></tr>
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search</td></tr>
<tr><td>minimumResultsForSearch</td><td>int</td><td>
<p>
@ -675,25 +839,30 @@ version: 2.1
<p class="alert alert-info">Only applies to single-value select boxes</p>
</td>
</tr>
<tr><td>placeholder</td><td>object/string</td><td>
<p>Initial value that is selected if no other selection is made.</p>
<tr><td>maximumSelectionSize</td><td>int</td><td>
<p>
The value can be specified either as an <code>object</code> or as a <code>string</code>. If
specified as a <code>string</code> any custom <code>formatSelection</code> function will be
bypassed and the string value will be rendered directly.
The maximum number of items that can be selected in a multi-select control. If this number is less than 1 selection is not limited.
</p>
<p>Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
by the <code>formatSelectionTooBig</code> function</p>
</td>
</tr>
<tr><td>placeholder</td><td>string</td><td>
<p>Initial value that is selected if no other selection is made.</p>
<p>The placeholder can also be specified as a <code>data-placeholder</code> attribute on the <code>select</code>
or <code>input</code> element that Select2 is attached to. In this case only <code>string</code>
values are supported
or <code>input</code> element that Select2 is attached to.
</p>
<p class="alert alert-warning">Note that because browsers assume the first <code>option</code> element
is selected in
non-multi-value select boxes an empty first <code>option</code> element must be provided (<code>&lt;option&gt;&lt;/option&gt;</code>)
is selected in non-multi-value select boxes an empty first <code>option</code> element must be provided (<code>&lt;option&gt;&lt;/option&gt;</code>)
for the placeholder to work.
</p>
<p class="alert alert-warning">When Select2 is used in multi-select mode the placeholder must be a string.</p>
</td></tr>
<tr><td>separator</td><td>string</td><td>
<p>
Separator character or string used to delimit ids in <code>value</code> attribute of the multi-valued selects.
The default delimiter is the <code>,</code> character.
</p>
</td></tr>
<tr>
<td>allowClear</td>
@ -751,38 +920,66 @@ version: 2.1
</table>
The default implementation expects the object to have a <code>id</code> property that is returned.
</td></tr>
<tr><td>matcher</td><td>function</td><td>
<tr><td id="doc-matcher">matcher</td><td>function</td><td>
Used to determine whether or not the search term matches an option when a built-in query function is used.
The built in query function is used when Select2 is attached to a <code>select</code>, or the <code>local</code> or <code>tags</code> helpers are used.
<pre>matcher(term, text)</pre>
<pre>matcher(term, text, option)</pre>
<table class="table table-bordered table-striped">
<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>text</td><td>string</td><td>text of the option being matched</td></tr>
<tr><td>&lt;returns&gt;</td><td>boolean</td><td><code>true</code> if search term matches the option text, or <code>false</code> otherwise</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>
<tr><td>&lt;returns&gt;</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 ther term:
<code>function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }</code>
</td></tr>
<tr><td>formatSelection</td><td>function</td><td>
Function used to render the current selection.
<pre>formatSelection(object)</pre>
<pre>formatSelection(object, container)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>object</td><td>object</td><td>The selected result object returned from the <code>query</code> function</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
<tr><td>container</td><td>jQuery object</td><td>jQuery wrapper of the node to which the selection should be appended</td></tr>
<tr><td>&lt;returns&gt;</td><td>string (optional)</td><td>Html string, a DOM element, or a jQuery object that renders the selection</td></tr>
</table>
The default implementation expects the object to have a <code>text</code> property that is returned.
<p>The default implementation expects the object to have a <code>text</code> property that is returned.</p>
<p>The implementation may choose to append elements directly to the provided <code>container</code> object, or return a single value and have it automatically appended</p>
<br><br>
<p>
When attached to a <code>select</code> the original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
<pre>
format(item) {
var originalOption = item.element;
return item.text
}
</pre>
</p>
</td></tr>
<tr><td>formatResult</td><td>function</td><td>
Function used to render a result that the user can select.
<pre>formatResult(object)</pre>
<pre>formatResult(object, container, query)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>object</td><td>object</td><td>One of the result objects returned from the <code>query</code> function</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr>
<tr><td>container</td><td>jQuery object</td><td>jQuery wrapper of the node that should contain the representation of the result</td></tr>
<tr><td>query</td><td>object</td><td>The query object used to request this set of results</td></tr>
<tr><td>&lt;returns&gt;</td><td>string (optional)</td><td>Html string, a DOM element, or a jQuery object that represents the result</td></tr>
</table>
The default implementation expects the object to have a <code>text</code> property that is returned.
<p>The default implementation expects the object to have a <code>text</code> property that is returned.</p>
<p>The implementation may choose to append elements directly to the provided <code>container</code> object, or return a single value and have it automatically appended</p>
<br><br>
<p>
When attached to a <code>select</code> the original <code>&lt;option&gt;</code> (or &lt;optgroup&gt;) element is accessible inside the specified function through the property <code>item.element</code>:
<pre>
format(item) {
var originalOption = item.element;
return item.text
}
</pre>
</p>
</td></tr>
<tr><td>formatNoMatches</td><td>function</td><td>
Function used to render the &quot;No matches&quot; message
@ -803,6 +1000,15 @@ version: 2.1
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>formatSelectionTooBig</td><td>function</td><td>
Function used to render the &quot;You cannot select any more choices&quot; message
<pre>formatSelectionTooBig(maxSize)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>maxSize</td><td>string</td><td>The maximum specified size of the selection</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>createSearchChoice</td><td>function</td><td>
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
@ -827,24 +1033,23 @@ version: 2.1
<p>
Essentially this is an <code>id->object</code> mapping function.
</p>
<pre>initSelection(element)</pre>
<pre>initSelection(element, callback)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>element</td><td>jQuery array</td><td>element Select2 is attached to</td></tr>
<tr><td>&lt;returns&gt;</td><td>object or array of objects</td><td><code>Object</code> representing the choice
to be selected, or an <code>array</code> of such objects in case Select2 is in multi mode.</td></tr>
<tr><td>callback</td><td>function</td><td>callback function that should be called with the data which is either an object in case of a single select or an array of objects in case of multi-select</td></tr>
</table>
<p class="alert alert-info">This function will only be called when there is initial input to be processed.</p>
Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
the text:
<pre class="prettyprint">
$("#tags").select2({
initSelection : function (element) {
initSelection : function (element, callback) {
var data = [];
$(element.val().split(",")).each(function () {
data.push({id: this, text: this});
});
return data;
callback(data);
}
});
</pre>
@ -864,13 +1069,42 @@ $("#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</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.</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>
</table>
</td></tr>
</table>
<p class="alert alert-warning">In order for this function to work Select2 should be attached to a <code>input type='hidden'</code> tag instead of a <code>select</code>.</p>
<p>
<h4>Example Data</h4>
<pre>
{
more: false,
results: [
{ id: "CA", text: "California" },
{ id: "AL", text: "Alabama" }
]
}
</pre>
</p>
<p>
<h4>Example Hierarchical Data</h4>
<pre>
{
more: false,
results: [
{ text: "Western", children: [
{ id: "CA", text: "California" },
{ id: "AZ", text: "Arizona" }
] },
{ text: "Eastern", children: [
{ id: "FL", text: "Florida" }
] }
]
}
</pre>
</p>
</td>
</tr>
<tr><td>ajax</td><td>object</td><td>
@ -939,21 +1173,28 @@ $("#tags").select2({
<tr>
<th>Attached to <code>select</code></th>
<td>Value of the <code>value</code> attribute of the <code>option</code> that should be selected</td>
<td>Array of values specified to the left. <code>null</code> for empty.</td>
<td>Array of the <code>value</code> attributes of the <code>option</code>s that should be selected. <code>null</code> for empty.</td>
</tr>
<tr>
<th>Attached to <code>input[type=hidden]</code></th>
<td>An object representing the selection. Should at least contain an <code>id</code> key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional <code>text</code> key</td>
<td>Array of objects specified to the left. <code>null</code> for empty.</td>
<td>Id of the object that should be selected. <code>""</code> to clear. Can only be used if <code>initSelection()</code> was specified.</td>
<td>An array of objects ids that should be selected. <code>""</code> to clear. Can only be used if <code>initSelection()</code> was specified.</td>
</tr>
</table>
</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>
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
<div class="row">
<div class="span12"><h3>data</h3></div>
</div>
<p>Gets or sets the selection. Analogous to <code>val</code> method, but works with objects instead of ids.</p>
<p><code>data</code> method invoked on a single-select with an unset value will return <code>null</code>, while a <code>data</code> method invoked on an empty multi-select will return <code>[]</code></p>
<div class="row">
<div class="span12"><h3>destroy</h3></div>
</div>
@ -1003,8 +1244,47 @@ Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("
<h3>change</h3>
<p>Fired when selection is changed.</p>
<p class="alert alert-info">This event is not fired when the selection is changed using Select2's <code>val()</code> method.</p>
<p>The event object contains the following custom properties:
<dl>
<dt>val</dt><dd>the current selection (taking into account the result of the change) - id or array of ids</dd>
<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">
<div class="span12">
<h3>open</h3>
<p>Fired when 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>
</section>
<div class="row">
<div class="span12">
<h3>Configuring Defaults</h3>
Select2 exposes its default options via the <code>$.fn.select2.defaults</code> object. Properties changed in this object (same properties configurable through the constructor) will take effect for every instance created after the change
</div>
</div>
<!--
<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there</div>
<script>
$(document).ready(function() {
var el=$("#focus-spy");
$(window).bind("scroll", function(){ el.css({top:$(window).scrollTop()}); });
var update=function() {
var a=document.activeElement;
var b=$(a);
el.html("tag: "+a.tagName+" id:"+a.id+" class:"+b.attr("class")+" val:"+b.val());
window.setTimeout(update, 100);
};
update();
});
</script>
-->

1010
select-2.1.html Executable file
View File

File diff suppressed because it is too large Load Diff

67
select2-3.0/README.md Executable file
View File

@ -0,0 +1,67 @@
Select2
=================
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent [Chosen](http://harvesthq.github.com/chosen/) library.
To get started -- checkout http://ivaynberg.github.com/select2!
What Does Select2 Support That Chosen Does Not?
-------------------------------------------------
* Working with large datasets: Chosen requires the entire dataset to be loaded as `option` tags in the DOM, which limits
it to working with small-ish datasets. Select2 uses a function to find results on-the-fly, which allows it to partially
load results.
* Paging of results: Since Select2 works with large datasets and only loads a small amount of matching results at a time
it has to support paging. Select2 will call the search function when the user scrolls to the bottom of currently loaded
result set allowing for the 'infinite scrolling' of results.
* Custom markup for results: Chosen only supports rendering text results because that is the only markup supported by
`option` tags. Select2 provides an extension point which can be used to produce any kind of markup to represent results.
* Ability to add results on the fly: Select2 provides the ability to add results from the search term entered by the user, which allows it to be used for
tagging.
Browser Compatibility
--------------------
* IE 8+ (7 mostly works except for [issue with z-index](https://github.com/ivaynberg/select2/issues/37))
* Chrome 8+
* Firefox 3.5+
* Safari 3+
* Opera 10.6+
Integrations
------------
* [Wicket-Select2](https://github.com/ivaynberg/wicket-select2) (Java / Apache Wicket)
* [select2-rails](https://github.com/argerim/select2-rails) (Ruby on Rails)
* [AngularUI](http://angular-ui.github.com/#directives-select2) ([AngularJS](angularjs.org))
Bug tracker
-----------
Have a bug? Please create an issue here on GitHub!
https://github.com/ivaynberg/select2/issues
Mailing list
------------
Have a question? Ask on our mailing list!
select2@googlegroups.com
https://groups.google.com/d/forum/select2
Copyright and License
---------------------
Copyright 2012 Igor Vaynberg
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.

514
select2-3.0/select2.css Executable file
View File

@ -0,0 +1,514 @@
/*
Version: 3.0 Timestamp: Tue Jul 31 21:09:16 PDT 2012
*/
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
}
.select2-container,
.select2-drop,
.select2-search,
.select2-search input{
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
-moz-box-sizing: border-box; /* firefox */
-ms-box-sizing: border-box; /* ie */
-webkit-box-sizing: border-box; /* webkit */
-khtml-box-sizing: border-box; /* konqueror */
box-sizing: border-box; /* css3 */
}
.select2-container .select2-choice {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #aaa;
display: block;
overflow: hidden;
white-space: nowrap;
position: relative;
height: 26px;
line-height: 26px;
padding: 0 0 0 8px;
color: #444;
text-decoration: none;
}
.select2-container.select2-drop-above .select2-choice
{
border-bottom-color: #aaa;
-webkit-border-radius:0px 0px 4px 4px;
-moz-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
}
.select2-container .select2-choice span {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.select2-container .select2-choice abbr {
display: block;
position: absolute;
right: 26px;
top: 8px;
width: 12px;
height: 12px;
font-size: 1px;
background: url('select2.png') right top no-repeat;
cursor: pointer;
text-decoration: none;
border:0;
outline: 0;
}
.select2-container .select2-choice abbr:hover {
background-position: right -11px;
cursor: pointer;
}
.select2-drop {
background: #fff;
color: #000;
border: 1px solid #aaa;
border-top: 0;
position: absolute;
top: 100%;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
z-index: 9999;
width:100%;
margin-top:-1px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.select2-drop.select2-drop-above {
-webkit-border-radius: 4px 4px 0px 0px;
-moz-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
margin-top:1px;
border-top: 1px solid #aaa;
border-bottom: 0;
-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}
.select2-container .select2-choice div {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
border-left: 1px solid #aaa;
position: absolute;
right: 0;
top: 0;
display: block;
height: 100%;
width: 18px;
}
.select2-container .select2-choice div b {
background: url('select2.png') no-repeat 0 1px;
display: block;
width: 100%;
height: 100%;
}
.select2-search {
display: inline-block;
white-space: nowrap;
z-index: 10000;
min-height: 26px;
width: 100%;
margin: 0;
padding-left: 4px;
padding-right: 4px;
}
.select2-search-hidden {
display: block;
position: absolute;
left: -10000px;
}
.select2-search input {
background: #fff url('select2.png') no-repeat 100% -22px;
background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
padding: 4px 20px 4px 5px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
width:100%;
margin:0;
height:auto !important;
min-height: 26px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.select2-drop.select2-drop-above .select2-search input
{
margin-top:4px;
}
.select2-search input.select2-active {
background: #fff url('spinner.gif') no-repeat 100%;
background: url('spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
outline: none;
}
.select2-dropdown-open .select2-choice {
border: 1px solid #aaa;
border-bottom-color: transparent;
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow : 0 1px 0 #fff inset;
-o-box-shadow : 0 1px 0 #fff inset;
box-shadow : 0 1px 0 #fff inset;
background-color: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-webkit-border-bottom-left-radius : 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft : 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius : 0;
border-bottom-right-radius: 0;
}
.select2-dropdown-open .select2-choice div {
background: transparent;
border-left: none;
}
.select2-dropdown-open .select2-choice div b {
background-position: -18px 1px;
}
/* results */
.select2-results {
margin: 4px 4px 4px 0;
padding: 0 0 0 4px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 200px;
}
.select2-results ul.select2-result-sub {
margin: 0 0 0 0;
}
.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
.select2-results li {
list-style: none;
display: list-item;
}
.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: bold;
}
.select2-results .select2-result-label {
padding: 3px 7px 4px;
margin: 0;
cursor: pointer;
}
.select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
.select2-results li em {
background: #feffde;
font-style: normal;
}
.select2-results .select2-highlighted em {
background: transparent;
}
.select2-results .select2-no-results {
background: #f4f4f4;
display: list-item;
}
.select2-results .select2-selection-limit {
background: #f4f4f4;
display: list-item;
}
/*
disabled look for already selected choices in the results dropdown
.select2-results .select2-disabled.select2-highlighted {
color: #666;
background: #f4f4f4;
display: list-item;
cursor: default;
}
.select2-results .select2-disabled {
background: #f4f4f4;
display: list-item;
cursor: default;
}
*/
.select2-results .select2-disabled {
display: none;
}
.select2-more-results.select2-active {
background: #f4f4f4 url('spinner.gif') no-repeat 100%;
}
.select2-more-results {
background: #f4f4f4;
display: list-item;
}
/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container.select2-container-disabled .select2-choice div {
background-color: #f4f4f4;
background-image: none;
border-left: 0;
}
/* multiselect */
.select2-container-multi .select2-choices {
background-color: #fff;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
border: 1px solid #aaa;
margin: 0;
padding: 0;
cursor: text;
overflow: hidden;
height: auto !important;
height: 1%;
position: relative;
}
.select2-container-multi .select2-choices {
min-height: 26px;
}
.select2-container-multi.select2-container-active .select2-choices {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
outline: none;
}
.select2-container-multi .select2-choices li {
float: left;
list-style: none;
}
.select2-container-multi .select2-choices .select2-search-field {
white-space: nowrap;
margin: 0;
padding: 0;
}
.select2-container-multi .select2-choices .select2-search-field input {
color: #666;
background: transparent !important;
font-family: sans-serif;
font-size: 100%;
height: 15px;
padding: 5px;
margin: 1px 0;
outline: 0;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow : none;
-o-box-shadow : none;
box-shadow : none;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('spinner.gif') no-repeat 100% !important;
}
.select2-default {
color: #999 !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
-webkit-border-radius: 3px;
-moz-border-radius : 3px;
border-radius : 3px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
background-color: #e4e4e4;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
color: #333;
border: 1px solid #aaaaaa;
line-height: 13px;
padding: 3px 5px 3px 18px;
margin: 3px 0 3px 5px;
position: relative;
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice span {
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
background: #d4d4d4;
}
.select2-search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background: url('select2.png') right top no-repeat;
outline: none;
}
.select2-container-multi .select2-search-choice-close {
left: 3px;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
background-position: right -11px;
}
/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices{
background-color: #f4f4f4;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
background-image: none;
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 3px 5px 3px 5px;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
display: none;
}
/* end multiselect */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
.select2-result-unselectable .select2-match { text-decoration: none; }
.select2-offscreen { position: absolute; left: -10000px; }

2195
select2-3.0/select2.js Executable file
View File

File diff suppressed because it is too large Load Diff

76
select2-3.0/select2.min.js vendored Normal file
View File

@ -0,0 +1,76 @@
/*
Copyright 2012 Igor Vaynberg
Version: 3.0 Timestamp: Tue Jul 31 21:09:16 PDT 2012
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in
compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is
distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.
*/
(function(f){"undefined"==typeof f.fn.each2&&f.fn.extend({each2:function(h){for(var l=f([0]),j=-1,m=this.length;++j<m&&(l.context=l[0]=this[j])&&!1!==h.call(l[0],j,l););return this}})})(jQuery);
(function(f,h){function l(a){return a&&"string"===typeof a?a.replace("&","&amp;"):a}function j(a,b){var c=0,d=b.length,g;if("undefined"===typeof a)return-1;if(a.constructor===String)for(;c<d;c+=1){if(0===a.localeCompare(b[c]))return c}else for(;c<d;c+=1)if(g=b[c],g.constructor===String){if(0===g.localeCompare(a))return c}else if(g===a)return c;return-1}function m(a,b){return a===b?!0:a===h||b===h||null===a||null===b?!1:a.constructor===String?0===a.localeCompare(b):b.constructor===String?0===b.localeCompare(a):
!1}function y(a,b){var c,d,g;if(null===a||1>a.length)return[];c=a.split(b);d=0;for(g=c.length;d<g;d+=1)c[d]=f.trim(c[d]);return c}function z(a,b){var c;return function(){window.clearTimeout(c);c=window.setTimeout(b,a)}}function i(a){a.preventDefault();a.stopPropagation()}function A(a,b,c){var d=a.toUpperCase().indexOf(b.toUpperCase()),b=b.length;0>d?c.push(a):(c.push(a.substring(0,d)),c.push("<span class='select2-match'>"),c.push(a.substring(d,d+b)),c.push("</span>"),c.push(a.substring(d+b,a.length)))}
function B(a){var b,c=0,d=null,g=a.quietMillis||100;return function(k){window.clearTimeout(b);b=window.setTimeout(function(){var b=c+=1,g=a.data,e=a.transport||f.ajax,h=a.type||"GET",g=g.call(this,k.term,k.page,k.context);null!==d&&d.abort();d=e.call(null,{url:a.url,dataType:a.dataType,data:g,type:h,success:function(d){b<c||(d=a.results(d,k.page),k.callback(d))}})},g)}}function C(a){var b=a,c,d=function(a){return""+a.text};f.isArray(b)||(d=b.text,f.isFunction(d)||(c=b.text,d=function(a){return a[c]}),
b=b.results);return function(a){var c=a.term,e={};if(c==="")a.callback({results:b});else{e.results=f(b).filter(function(){return a.matcher(c,d(this))}).get();a.callback(e)}}}function D(a){return f.isFunction(a)?a:function(b){var c=b.term,d={results:[]};f(a).each(function(){var a=this.text!==h,f=a?this.text:this;if(""===c||b.matcher(c,f))d.results.push(a?this:{id:this,text:this})});b.callback(d)}}function s(a){if(f.isFunction(a))return!0;if(!a)return fasle;throw Error("formatterName must be a function or a falsy value");
}function t(a){return f.isFunction(a)?a():a}function v(a,b){var c=function(){};c.prototype=new a;c.prototype.constructor=c;c.prototype.parent=a.prototype;c.prototype=f.extend(c.prototype,b);return c}if(window.Select2===h){var e,u,w,x,r;e={TAB:9,ENTER:13,ESC:27,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40,SHIFT:16,CTRL:17,ALT:18,PAGE_UP:33,PAGE_DOWN:34,HOME:36,END:35,BACKSPACE:8,DELETE:46,isArrow:function(a){a=a.which?a.which:a;switch(a){case e.LEFT:case e.RIGHT:case e.UP:case e.DOWN:return!0}return!1},
isControl:function(a){a=a.which?a.which:a;switch(a){case e.SHIFT:case e.CTRL:case e.ALT:return!0}return a.metaKey?!0:!1},isFunctionKey:function(a){a=a.which?a.which:a;return 112<=a&&123>=a}};f(document).delegate("*","mousemove",function(a){f.data(document,"select2-lastpos",{x:a.pageX,y:a.pageY})});f(document).ready(function(){f(document).delegate("*","mousedown touchend",function(a){var b=f(a.target).closest("div.select2-container").get(0),c;b?f(document).find("div.select2-container-active").each(function(){this!==
b&&f(this).data("select2").blur()}):(b=f(a.target).closest("div.select2-drop").get(0),f(document).find("div.select2-drop-active").each(function(){this!==b&&f(this).data("select2").blur()}));b=f(a.target);c=b.attr("for");"LABEL"===a.target.tagName&&(c&&0<c.length)&&(b=f("#"+c),b=b.data("select2"),b!==h&&(b.focus(),a.preventDefault()))})});u=v(Object,{bind:function(a){var b=this;return function(){a.apply(b,arguments)}},init:function(a){var b,c;this.opts=a=this.prepareOpts(a);this.id=a.id;a.element.data("select2")!==
h&&null!==a.element.data("select2")&&this.destroy();this.enabled=!0;this.container=this.createContainer();var d=!1,g;this.body=function(){!1===d&&(g=a.element.closest("body"),d=!0);return g};a.element.attr("class")!==h&&this.container.addClass(a.element.attr("class"));this.container.css(t(a.containerCss));this.container.addClass(t(a.containerCssClass));this.opts.element.data("select2",this).hide().after(this.container);this.container.data("select2",this);this.dropdown=this.container.find(".select2-drop");
this.dropdown.css(t(a.dropdownCss));this.dropdown.addClass(t(a.dropdownCssClass));this.dropdown.data("select2",this);this.results=b=this.container.find(".select2-results");this.search=c=this.container.find("input.select2-input");c.attr("tabIndex",this.opts.element.attr("tabIndex"));this.resultsPage=0;this.context=null;this.initContainer();this.initContainerWidth();this.results.bind("mousemove",function(a){var b=f.data(document,"select2-lastpos");(b===h||b.x!==a.pageX||b.y!==a.pageY)&&f(a.target).trigger("mousemove-filtered",
a)});this.dropdown.delegate(".select2-results","mousemove-filtered",this.bind(this.highlightUnderEvent));var k=this.results,e=z(80,function(a){k.trigger("scroll-debounced",a)});k.bind("scroll",function(a){0<=j(a.target,k.get())&&e(a)});this.dropdown.delegate(".select2-results","scroll-debounced",this.bind(this.loadMoreIfNeeded));f.fn.mousewheel&&b.mousewheel(function(a,c,d,g){c=b.scrollTop();0<g&&0>=c-g?(b.scrollTop(0),i(a)):0>g&&b.get(0).scrollHeight-b.scrollTop()+g<=b.height()&&(b.scrollTop(b.get(0).scrollHeight-
b.height()),i(a))});c.bind("keydown",function(){f.data(c,"keyup-change-value")===h&&f.data(c,"keyup-change-value",c.val())});c.bind("keyup",function(){var a=f.data(c,"keyup-change-value");a!==h&&c.val()!==a&&(f.removeData(c,"keyup-change-value"),c.trigger("keyup-change"))});c.bind("keyup-change",this.bind(this.updateResults));c.bind("focus",function(){c.addClass("select2-focused");" "===c.val()&&c.val("")});c.bind("blur",function(){c.removeClass("select2-focused")});this.dropdown.delegate(".select2-results",
"mouseup",this.bind(function(a){0<f(a.target).closest(".select2-result-selectable:not(.select2-disabled)").length?(this.highlightUnderEvent(a),this.selectHighlighted(a)):this.focusSearch();i(a)}));this.dropdown.bind("click mouseup mousedown",function(a){a.stopPropagation()});f.isFunction(this.opts.initSelection)&&(this.initSelection(),this.monitorSource());a.element.is(":disabled")&&this.disable()},destroy:function(){var a=this.opts.element.data("select2");a!==h&&(a.container.remove(),a.dropdown.remove(),
a.opts.element.removeData("select2").unbind(".select2").show())},prepareOpts:function(a){var b,c,d;b=a.element;"select"===b.get(0).tagName.toLowerCase()&&(this.select=c=a.element);a.separator=a.separator||",";c&&f.each("id multiple ajax query createSearchChoice initSelection data tags".split(" "),function(){if(this in a)throw Error("Option '"+this+"' is not allowed for Select2 when attached to a <select> element.");});a=f.extend({},{populateResults:function(b,c,d){var e,E=this.opts.id;e=function(b,
c,g){var k,i,j,p,q,n,m;k=0;for(i=b.length;k<i;k=k+1){j=b[k];p=E(j)!==h;q="children"in j&&j.children.length>0;n=f("<li></li>");n.addClass("select2-results-dept-"+g);n.addClass("select2-result");n.addClass(p?"select2-result-selectable":"select2-result-unselectable");q&&n.addClass("select2-result-with-children");p=f("<div></div>");p.addClass("select2-result-label");m=a.formatResult(j,p,d);m!==h&&p.html(l(m));n.append(p);if(q){q=f("<ul></ul>");q.addClass("select2-result-sub");e(j.children,q,g+1);n.append(q)}n.data("select2-data",
j);c.append(n)}};e(c,b,0)}},f.fn.select2.defaults,a);"function"!==typeof a.id&&(d=a.id,a.id=function(a){return a[d]});if(c)a.query=this.bind(function(a){var c={results:[],more:false},d=a.term,e,i,j;j=function(b,c){var f;if(b.is("option"))a.matcher(d,b.text(),b)&&c.push({id:b.attr("value"),text:b.text(),element:b.get()});else if(b.is("optgroup")){f={text:b.attr("label"),children:[],element:b.get()};b.children().each2(function(a,b){j(b,f.children)});f.children.length>0&&c.push(f)}};e=b.children();if(this.getPlaceholder()!==
h&&e.length>0){i=e[0];f(i).text()===""&&(e=e.not(i))}e.each2(function(a,b){j(b,c.results)});a.callback(c)}),a.id=function(a){return a.id};else if(!("query"in a))if("ajax"in a){if((c=a.element.data("ajax-url"))&&0<c.length)a.ajax.url=c;a.query=B(a.ajax)}else"data"in a?a.query=C(a.data):"tags"in a&&(a.query=D(a.tags),a.createSearchChoice=function(a){return{id:a,text:a}},a.initSelection=function(b,c){var d=[];f(y(b.val(),a.separator)).each(function(){var b=this,c=this,g=a.tags;f.isFunction(g)&&(g=g());
f(g).each(function(){if(m(this.id,b)){c=this.text;return false}});d.push({id:b,text:c})});c(d)});if("function"!==typeof a.query)throw"query function not defined for Select2 "+a.element.attr("id");return a},monitorSource:function(){this.opts.element.bind("change.select2",this.bind(function(){!0!==this.opts.element.data("select2-change-triggered")&&this.initSelection()}))},triggerChange:function(a){a=a||{};a=f.extend({},a,{type:"change",val:this.val()});this.opts.element.data("select2-change-triggered",
!0);this.opts.element.trigger(a);this.opts.element.data("select2-change-triggered",!1);this.opts.element.click()},enable:function(){this.enabled||(this.enabled=!0,this.container.removeClass("select2-container-disabled"))},disable:function(){this.enabled&&(this.close(),this.enabled=!1,this.container.addClass("select2-container-disabled"))},opened:function(){return this.container.hasClass("select2-dropdown-open")},positionDropdown:function(){var a=this.container.offset(),b=this.container.outerHeight(),
c=this.container.outerWidth(),d=this.dropdown.outerHeight(),g=f(window).scrollTop()+document.documentElement.clientHeight,b=a.top+b,g=b+d<=g,e=a.top-d>=this.body().scrollTop(),h;this.dropdown.hasClass("select2-drop-above")?(h=!0,!e&&g&&(h=!1)):(h=!1,!g&&e&&(h=!0));h?(b=a.top-d,this.container.addClass("select2-drop-above"),this.dropdown.addClass("select2-drop-above")):(this.container.removeClass("select2-drop-above"),this.dropdown.removeClass("select2-drop-above"));this.dropdown.css({top:b,left:a.left,
width:c})},shouldOpen:function(){var a;if(this.opened())return!1;a=jQuery.Event("open");this.opts.element.trigger(a);return!a.isDefaultPrevented()},clearDropdownAlignmentPreference:function(){this.container.removeClass("select2-drop-above");this.dropdown.removeClass("select2-drop-above")},open:function(){if(!this.shouldOpen())return!1;window.setTimeout(this.bind(this.opening),1);return!0},opening:function(){this.clearDropdownAlignmentPreference();" "===this.search.val()&&this.search.val("");this.dropdown.addClass("select2-drop-active");
this.container.addClass("select2-dropdown-open").addClass("select2-container-active");this.updateResults(!0);this.dropdown[0]!==this.body().children().last()[0]&&this.dropdown.detach().appendTo(this.body());this.dropdown.show();this.ensureHighlightVisible();this.positionDropdown();this.focusSearch()},close:function(){this.opened()&&(this.clearDropdownAlignmentPreference(),this.dropdown.hide(),this.container.removeClass("select2-dropdown-open").removeClass("select2-container-active"),this.results.empty(),
this.clearSearch(),this.opts.element.trigger(jQuery.Event("close")))},clearSearch:function(){},ensureHighlightVisible:function(){var a=this.results,b,c,d,g;c=this.highlight();0>c||(0==c?a.scrollTop(0):(b=a.find(".select2-result-selectable"),d=f(b[c]),g=d.offset().top+d.outerHeight(),c===b.length-1&&(b=a.find("li.select2-more-results"),0<b.length&&(g=b.offset().top+b.outerHeight())),b=a.offset().top+a.outerHeight(),g>b&&a.scrollTop(a.scrollTop()+(g-b)),d=d.offset().top-a.offset().top,0>d&&a.scrollTop(a.scrollTop()+
d)))},moveHighlight:function(a){for(var b=this.results.find(".select2-result-selectable"),c=this.highlight();-1<c&&c<b.length;){var c=c+a,d=f(b[c]);if(d.hasClass("select2-result-selectable")&&!d.hasClass("select2-disabled")){this.highlight(c);break}}},highlight:function(a){var b=this.results.find(".select2-result-selectable").not(".select2-disabled");if(0===arguments.length)return j(b.filter(".select2-highlighted")[0],b.get());a>=b.length&&(a=b.length-1);0>a&&(a=0);b.removeClass("select2-highlighted");
f(b[a]).addClass("select2-highlighted");this.ensureHighlightVisible()},countSelectableResults:function(){return this.results.find(".select2-result-selectable").not(".select2-disabled").length},highlightUnderEvent:function(a){a=f(a.target).closest(".select2-result-selectable");if(0<a.length&&!a.is(".select2-highlighted")){var b=this.results.find(".select2-result-selectable");this.highlight(b.index(a))}else 0==a.length&&this.results.find(".select2-highlighted").removeClass("select2-highlighted")},loadMoreIfNeeded:function(){var a=
this.results,b=a.find("li.select2-more-results"),c,d=this.resultsPage+1,f=this,e=this.search.val(),h=this.context;0!==b.length&&(c=b.offset().top-a.offset().top-a.height(),0>=c&&(b.addClass("select2-active"),this.opts.query({term:e,page:d,context:h,matcher:this.opts.matcher,callback:this.bind(function(c){f.opts.populateResults.call(this,a,c.results,{term:e,page:d,context:h});!0===c.more?(b.detach().appendTo(a.children(":last")).text(f.opts.formatLoadMore(d+1)),window.setTimeout(function(){f.loadMoreIfNeeded()},
10)):b.remove();f.positionDropdown();f.resultsPage=d})})))},updateResults:function(a){function b(){g.scrollTop(0);d.removeClass("select2-active");j.positionDropdown()}function c(a){g.html(l(a));b()}var d=this.search,g=this.results,e=this.opts,i,j=this;if(!(!0!==a&&(!1===this.showSearchInput||!this.opened()))){d.addClass("select2-active");if(1<=e.maximumSelectionSize&&(i=this.data(),f.isArray(i)&&i.length>=e.maximumSelectionSize&&s(e.formatSelectionTooBig,"formatSelectionTooBig"))){c("<li class='select2-selection-limit'>"+
e.formatSelectionTooBig(e.maximumSelectionSize)+"</li>");return}d.val().length<e.minimumInputLength&&s(e.formatInputTooShort,"formatInputTooShort")?c("<li class='select2-no-results'>"+e.formatInputTooShort(d.val(),e.minimumInputLength)+"</li>"):(this.resultsPage=1,e.query({term:d.val(),page:this.resultsPage,context:null,matcher:e.matcher,callback:this.bind(function(i){var o;this.context=i.context===h?null:i.context;this.opts.createSearchChoice&&""!==d.val()&&(o=this.opts.createSearchChoice.call(null,
d.val(),i.results),o!==h&&null!==o&&j.id(o)!==h&&null!==j.id(o)&&0===f(i.results).filter(function(){return m(j.id(this),j.id(o))}).length&&i.results.unshift(o));0===i.results.length&&s(e.formatNoMatches,"formatNoMatches")?c("<li class='select2-no-results'>"+e.formatNoMatches(d.val())+"</li>"):(g.empty(),j.opts.populateResults.call(this,g,i.results,{term:d.val(),page:this.resultsPage,context:null}),!0===i.more&&s(e.formatLoadMore,"formatLoadMore")&&(g.children().filter(":last").append("<li class='select2-more-results'>"+
l(e.formatLoadMore(this.resultsPage))+"</li>"),window.setTimeout(function(){j.loadMoreIfNeeded()},10)),this.postprocessResults(i,a),b())})}))}},cancel:function(){this.close()},blur:function(){this.close();this.container.removeClass("select2-container-active");this.dropdown.removeClass("select2-drop-active");this.search[0]===document.activeElement&&this.search.blur();this.clearSearch();this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus")},focusSearch:function(){window.setTimeout(this.bind(function(){this.search.focus();
this.search.val(this.search.val())}),10)},selectHighlighted:function(){var a=this.highlight(),b=this.results.find(".select2-highlighted").not(".select2-disabled"),c=b.closest(".select2-result-selectable").data("select2-data");c&&(b.addClass("select2-disabled"),this.highlight(a),this.onSelect(c))},getPlaceholder:function(){return this.opts.element.attr("placeholder")||this.opts.element.attr("data-placeholder")||this.opts.element.data("placeholder")||this.opts.placeholder},initContainerWidth:function(){var a=
function(){var a,c,d,e;if("off"===this.opts.width)return null;if("element"===this.opts.width)return 0===this.opts.element.outerWidth()?"auto":this.opts.element.outerWidth()+"px";if("copy"===this.opts.width||"resolve"===this.opts.width){a=this.opts.element.attr("style");if(a!==h){a=a.split(";");d=0;for(e=a.length;d<e;d+=1)if(c=a[d].replace(/\s/g,"").match(/width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/),null!==c&&1<=c.length)return c[1]}return"resolve"===this.opts.width?(a=this.opts.element.css("width"),
0<a.indexOf("%")?a:0===this.opts.element.outerWidth()?"auto":this.opts.element.outerWidth()+"px"):null}return f.isFunction(this.opts.width)?this.opts.width():this.opts.width}.call(this);null!==a&&this.container.attr("style","width: "+a)}});w=v(u,{createContainer:function(){return f("<div></div>",{"class":"select2-container"}).html(" <a href='javascript:void(0)' class='select2-choice'> <span></span><abbr class='select2-search-choice-close' style='display:none;'></abbr> <div><b></b></div></a> <div class='select2-drop select2-offscreen'> <div class='select2-search'> <input type='text' autocomplete='off' class='select2-input'/> </div> <ul class='select2-results'> </ul></div>")},
opening:function(){this.search.show();this.parent.opening.apply(this,arguments);this.dropdown.removeClass("select2-offscreen")},close:function(){this.opened()&&(this.parent.close.apply(this,arguments),this.dropdown.removeAttr("style").addClass("select2-offscreen").insertAfter(this.selection).show())},focus:function(){this.close();this.selection.focus()},isFocused:function(){return this.selection[0]===document.activeElement},cancel:function(){this.parent.cancel.apply(this,arguments);this.selection.focus()},
initContainer:function(){var a,b=this.dropdown;this.selection=a=this.container.find(".select2-choice");this.search.bind("keydown",this.bind(function(a){if(this.enabled)if(a.which===e.PAGE_UP||a.which===e.PAGE_DOWN)i(a);else if(this.opened())switch(a.which){case e.UP:case e.DOWN:this.moveHighlight(a.which===e.UP?-1:1);i(a);break;case e.TAB:case e.ENTER:this.selectHighlighted();i(a);break;case e.ESC:this.cancel(a),i(a)}else a.which===e.TAB||(e.isControl(a)||e.isFunctionKey(a)||a.which===e.ESC)||this.open()}));
this.search.bind("focus",this.bind(function(){this.selection.attr("tabIndex","-1")}));this.search.bind("blur",this.bind(function(){this.opened()||this.container.removeClass("select2-container-active");window.setTimeout(this.bind(function(){this.selection.attr("tabIndex",this.opts.element.attr("tabIndex"))}),10)}));a.bind("mousedown",this.bind(function(a){this.opened()?(this.close(),this.selection.focus()):this.enabled&&this.open();i(a)}));b.bind("mousedown",this.bind(function(){this.search.focus()}));
a.bind("focus",this.bind(function(){this.container.addClass("select2-container-active");this.search.attr("tabIndex","-1")}));a.bind("blur",this.bind(function(){this.container.removeClass("select2-container-active");window.setTimeout(this.bind(function(){this.search.attr("tabIndex",this.opts.element.attr("tabIndex"))}),10)}));a.bind("keydown",this.bind(function(a){if(this.enabled)if(a.which===e.PAGE_UP||a.which===e.PAGE_DOWN)i(a);else if(!(a.which===e.TAB||e.isControl(a)||e.isFunctionKey(a)||a.which===
e.ESC)){this.open();if(a.which!==e.ENTER&&!(48>a.which)){var b=String.fromCharCode(a.which).toLowerCase();a.shiftKey&&(b=b.toUpperCase());this.search.val(b)}i(a)}}));a.delegate("abbr","mousedown",this.bind(function(a){this.enabled&&(this.clear(),i(a),this.close(),this.triggerChange(),this.selection.focus())}));this.setPlaceholder();this.search.bind("focus",this.bind(function(){this.container.addClass("select2-container-active")}))},clear:function(){this.opts.element.val("");this.selection.find("span").empty();
this.selection.removeData("select2-data");this.setPlaceholder()},initSelection:function(){if(""===this.opts.element.val())this.close(),this.setPlaceholder();else{var a=this;this.opts.initSelection.call(null,this.opts.element,function(b){b!==h&&null!==b&&(a.updateSelection(b),a.close(),a.setPlaceholder())})}},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a,c){var d=a.find(":selected");f.isFunction(c)&&
c({id:d.attr("value"),text:d.text()})});return a},setPlaceholder:function(){var a=this.getPlaceholder();""===this.opts.element.val()&&a!==h&&!(this.select&&""!==this.select.find("option:first").text())&&(this.selection.find("span").html(l(a)),this.selection.addClass("select2-default"),this.selection.find("abbr").hide())},postprocessResults:function(a,b){var c=0,d=this,e=!0;this.results.find(".select2-result-selectable").each2(function(a,b){if(m(d.id(b.data("select2-data")),d.opts.element.val()))return c=
a,!1});this.highlight(c);!0===b&&(e=this.showSearchInput=a.results.length>=this.opts.minimumResultsForSearch,this.dropdown.find(".select2-search")[e?"removeClass":"addClass"]("select2-search-hidden"),f(this.dropdown,this.container)[e?"addClass":"removeClass"]("select2-with-searchbox"))},onSelect:function(a){var b=this.opts.element.val();this.opts.element.val(this.id(a));this.updateSelection(a);this.close();this.selection.focus();m(b,this.id(a))||this.triggerChange()},updateSelection:function(a){var b=
this.selection.find("span");this.selection.data("select2-data",a);b.empty();a=this.opts.formatSelection(a,b);a!==h&&b.append(l(a));this.selection.removeClass("select2-default");this.opts.allowClear&&this.getPlaceholder()!==h&&this.selection.find("abbr").show()},val:function(){var a,b=null,c=this;if(0===arguments.length)return this.opts.element.val();a=arguments[0];if(this.select)this.select.val(a).find(":selected").each2(function(a,c){b={id:c.attr("value"),text:c.text()};return!1}),this.updateSelection(b),
this.setPlaceholder();else{if(this.opts.initSelection===h)throw Error("cannot call val() if initSelection() is not defined");a?this.opts.initSelection(this.opts.element,function(a){c.opts.element.val(!a?"":c.id(a));c.updateSelection(a);c.setPlaceholder()}):this.clear()}},clearSearch:function(){this.search.val("")},data:function(a){var b;if(0===arguments.length)return b=this.selection.data("select2-data"),b==h&&(b=null),b;!a||""===a?this.clear():(this.opts.element.val(!a?"":this.id(a)),this.updateSelection(a))}});
x=v(u,{createContainer:function(){return f("<div></div>",{"class":"select2-container select2-container-multi"}).html(" <ul class='select2-choices'> <li class='select2-search-field'> <input type='text' autocomplete='off' style='width: 25px;' class='select2-input'> </li></ul><div class='select2-drop select2-drop-multi' style='display:none;'> <ul class='select2-results'> </ul></div>")},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&
(a.initSelection=function(a,c){var d=[];a.find(":selected").each2(function(a,b){d.push({id:b.attr("value"),text:b.text()})});f.isFunction(c)&&c(d)});return a},initContainer:function(){var a;this.searchContainer=this.container.find(".select2-search-field");this.selection=a=this.container.find(".select2-choices");this.search.bind("keydown",this.bind(function(b){if(this.enabled){if(b.which===e.BACKSPACE&&""===this.search.val()){this.close();var c;c=a.find(".select2-search-choice-focus");if(0<c.length){this.unselect(c.first());
this.search.width(10);i(b);return}c=a.find(".select2-search-choice");0<c.length&&c.last().addClass("select2-search-choice-focus")}else a.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");if(this.opened())switch(b.which){case e.UP:case e.DOWN:this.moveHighlight(b.which===e.UP?-1:1);i(b);return;case e.ENTER:case e.TAB:this.selectHighlighted();i(b);return;case e.ESC:this.cancel(b);i(b);return}b.which===e.TAB||(e.isControl(b)||e.isFunctionKey(b)||b.which===e.BACKSPACE||b.which===
e.ESC)||(this.open(),(b.which===e.PAGE_UP||b.which===e.PAGE_DOWN)&&i(b))}}));this.search.bind("keyup",this.bind(this.resizeSearch));this.search.bind("blur",this.bind(function(){this.container.removeClass("select2-container-active")}));this.container.delegate(".select2-choices","mousedown",this.bind(function(a){this.enabled&&(this.clearPlaceholder(),this.open(),this.focusSearch(),a.preventDefault())}));this.container.delegate(".select2-choices","focus",this.bind(function(){this.enabled&&(this.container.addClass("select2-container-active"),
this.dropdown.addClass("select2-drop-active"),this.clearPlaceholder())}));this.clearSearch()},enable:function(){this.enabled||(this.parent.enable.apply(this,arguments),this.search.removeAttr("disabled"))},disable:function(){this.enabled&&(this.parent.disable.apply(this,arguments),this.search.attr("disabled",!0))},initSelection:function(){""===this.opts.element.val()&&(this.updateSelection([]),this.close(),this.clearSearch());if(this.select||""!==this.opts.element.val()){var a=this;this.opts.initSelection.call(null,
this.opts.element,function(b){if(b!==h&&b!==null){a.updateSelection(b);a.close();a.clearSearch()}})}},clearSearch:function(){var a=this.getPlaceholder();a!==h&&0===this.getVal().length&&!1===this.search.hasClass("select2-focused")?(this.search.val(a).addClass("select2-default"),this.resizeSearch()):this.search.val(" ").width(10)},clearPlaceholder:function(){this.search.hasClass("select2-default")?this.search.val("").removeClass("select2-default"):" "===this.search.val()&&this.search.val("")},opening:function(){this.parent.opening.apply(this,
arguments);this.clearPlaceholder();this.resizeSearch();this.focusSearch()},close:function(){this.opened()&&this.parent.close.apply(this,arguments)},focus:function(){this.close();this.search.focus()},isFocused:function(){return this.search.hasClass("select2-focused")},updateSelection:function(a){var b=[],c=[],d=this;f(a).each(function(){0>j(d.id(this),b)&&(b.push(d.id(this)),c.push(this))});a=c;this.selection.find(".select2-search-choice").remove();f(a).each(function(){d.addSelectedChoice(this)});
d.postprocessResults()},onSelect:function(a){this.addSelectedChoice(a);this.select&&this.postprocessResults();this.opts.closeOnSelect?(this.close(),this.search.width(10)):(this.search.width(10),this.resizeSearch(),0<this.countSelectableResults()?this.positionDropdown():this.close());this.triggerChange({added:a});this.focusSearch()},cancel:function(){this.close();this.focusSearch()},addSelectedChoice:function(a){var b=f("<li class='select2-search-choice'> <div></div> <a href='javascript:void(0)' class='select2-search-choice-close' tabindex='-1'></a></li>"),
c=this.id(a),d=this.getVal(),e;e=this.opts.formatSelection(a,b);b.find("div").replaceWith("<div>"+l(e)+"</div>");b.find(".select2-search-choice-close").bind("click dblclick",this.bind(function(a){this.enabled&&(f(a.target).closest(".select2-search-choice").fadeOut("fast").animate({width:"hide"},50,this.bind(function(){this.unselect(f(a.target));this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");this.close();this.focusSearch()})).dequeue(),i(a))})).bind("focus",
this.bind(function(){this.enabled&&(this.container.addClass("select2-container-active"),this.dropdown.addClass("select2-drop-active"))}));b.data("select2-data",a);b.insertBefore(this.searchContainer);d.push(c);this.setVal(d)},unselect:function(a){var b=this.getVal(),c,d,a=a.closest(".select2-search-choice");if(0===a.length)throw"Invalid argument: "+a+". Must be .select2-search-choice";c=a.data("select2-data");d=j(this.id(c),b);0<=d&&(b.splice(d,1),this.setVal(b),this.select&&this.postprocessResults());
a.remove();this.triggerChange({removed:c})},postprocessResults:function(){var a=this.getVal(),b=this.results.find(".select2-result-selectable"),c=this.results.find(".select2-result-with-children"),d=this;b.each2(function(b,c){var f=d.id(c.data("select2-data"));0<=j(f,a)?c.addClass("select2-disabled").removeClass("select2-result-selectable"):c.removeClass("select2-disabled").addClass("select2-result-selectable")});c.each2(function(a,b){0==b.find(".select2-result-selectable").length?b.addClass("select2-disabled"):
b.removeClass("select2-disabled")});b.each2(function(a,b){if(!b.hasClass("select2-disabled")&&b.hasClass("select2-result-selectable"))return d.highlight(0),!1})},resizeSearch:function(){var a,b,c,d,e=this.search.outerWidth()-this.search.width();a=this.search;r||(c=a[0].currentStyle||window.getComputedStyle(a[0],null),r=f("<div></div>").css({position:"absolute",left:"-10000px",top:"-10000px",display:"none",fontSize:c.fontSize,fontFamily:c.fontFamily,fontStyle:c.fontStyle,fontWeight:c.fontWeight,letterSpacing:c.letterSpacing,
textTransform:c.textTransform,whiteSpace:"nowrap"}),f("body").append(r));r.text(a.val());a=r.width()+10;b=this.search.offset().left;c=this.selection.width();d=this.selection.offset().left;b=c-(b-d)-e;b<a&&(b=c-e);40>b&&(b=c-e);this.search.width(b)},getVal:function(){var a;if(this.select)return a=this.select.val(),null===a?[]:a;a=this.opts.element.val();return y(a,this.opts.separator)},setVal:function(a){var b;this.select?this.select.val(a):(b=[],f(a).each(function(){0>j(this,b)&&b.push(this)}),this.opts.element.val(0===
b.length?"":b.join(this.opts.separator)))},val:function(){var a,b=[],c=this;if(0===arguments.length)return this.getVal();if(a=arguments[0])if(this.setVal(a),this.select)this.select.find(":selected").each(function(){b.push({id:f(this).attr("value"),text:f(this).text()})}),this.updateSelection(b);else{if(this.opts.initSelection===h)throw Error("val() cannot be called if initSelection() is not defined");this.opts.initSelection(this.opts.element,function(a){var b=f(a).map(c.id);c.setVal(b);c.updateSelection(a);
c.clearSearch()})}else this.opts.element.val(""),this.updateSelection([]);this.clearSearch()},onSortStart:function(){if(this.select)throw Error("Sorting of elements is not supported when attached to <select>. Attach to <input type='hidden'/> instead.");this.search.width(0);this.searchContainer.hide()},onSortEnd:function(){var a=[],b=this;this.searchContainer.show();this.searchContainer.appendTo(this.searchContainer.parent());this.resizeSearch();this.selection.find(".select2-search-choice").each(function(){a.push(b.opts.id(f(this).data("select2-data")))});
this.setVal(a);this.triggerChange()},data:function(a){var b=this,c;if(0===arguments.length)return this.selection.find(".select2-search-choice").map(function(){return f(this).data("select2-data")}).get();a||(a=[]);c=f.map(a,function(a){return b.opts.id(a)});this.setVal(c);this.updateSelection(a);this.clearSearch()}});f.fn.select2=function(){var a=Array.prototype.slice.call(arguments,0),b,c,d,e,i="val destroy open close focus isFocused container onSortStart onSortEnd enable disable positionDropdown data".split(" ");
this.each(function(){if(0===a.length||"object"===typeof a[0])b=0===a.length?{}:f.extend({},a[0]),b.element=f(this),"select"===b.element.get(0).tagName.toLowerCase()?e=b.element.attr("multiple"):(e=b.multiple||!1,"tags"in b&&(b.multiple=e=!0)),c=e?new x:new w,c.init(b);else if("string"===typeof a[0]){if(0>j(a[0],i))throw"Unknown method: "+a[0];d=h;c=f(this).data("select2");if(c!==h&&(d="container"===a[0]?c.container:c[a[0]].apply(c,a.slice(1)),d!==h))return!1}else throw"Invalid arguments to select2 plugin: "+
a;});return d===h?this:d};f.fn.select2.defaults={width:"copy",closeOnSelect:!0,containerCss:{},dropdownCss:{},containerCssClass:"",dropdownCssClass:"",formatResult:function(a,b,c){b=[];A(a.text,c.term,b);return b.join("")},formatSelection:function(a){return a.text},formatNoMatches:function(){return"No matches found"},formatInputTooShort:function(a,b){return"Please enter "+(b-a.length)+" more characters"},formatSelectionTooBig:function(a){return"You can only select "+a+" items"},formatLoadMore:function(){return"Loading more results..."},
minimumResultsForSearch:0,minimumInputLength:0,maximumSelectionSize:0,id:function(a){return a.id},matcher:function(a,b){return 0<=b.toUpperCase().indexOf(a.toUpperCase())}};window.Select2={query:{ajax:B,local:C,tags:D},util:{debounce:z,markMatch:A},"class":{"abstract":u,single:w,multi:x}}}})(jQuery);

BIN
select2-3.0/select2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

BIN
select2-3.0/spinner.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

19
select2-latest.html
View File

@ -2,7 +2,7 @@
layout: main
title: Select2 Latest
group: navigation
version: 3.0
version: 3.1
---
<link href="select2-master/select2.css" rel="stylesheet"/>
@ -218,21 +218,10 @@ $("#e10_3").select2({
<section id="changelog">
<h2>Changelog from 2.x</h2>
<h2>Changelog from 3.0</h2>
<div class="row"><div class="span12">
<ul>
<li>Dropdown <code>div</code> is now appended directly to <code>body</code> and is absolutely positioned. This should allow the dropdown to overlap height-constrained containers such as modal windows.</li>
<li><code>Optgroup</code>s are now supported in <code>select</code>s. N-level deep nesting of results is supported when attached to <code>input[type=hidden]</code>, see the new <a href="#doc-query">children</a> property described in the docs.</li>
<li>Signature of <code>initSeletion</code> has changed to support initialization from asynchronous requests.</li>
<li>Dropdown will now open below or above the control depending on available screen space. No more scrolling the page to see to see all matched results.</li>
<li>Signature of <code>formatSelection</code> and <code>formatResult</code> changed in a backwards compatible way to support more powerful constructs than supported by strings alone.</li>
<li>Separator in multi-valued selects is now cofigurable, <code>,</code> still the default. See <code>separator</code> option in the docs.</li>
<li>Matching is now customizable. See <a href="#doc-matcher">matcher</a> function in the docs and the <a href="#matcher">Custom Matcher</a> example.</li>
<li><code>change</code> event now specifies which elements were added/removed</li>
<li><code>width</code> option now supports various strategies instead of always being copied from the source element</li>
<li>Clicks on a <code>label</code> associated with the source element are now redirected to Select2.</li>
<li><code>val</code> will now only accept ids, if you want to specify the full object for the selection use the new <code>data</code> method instead. <code>val</code> will also now only work on non-selects if <code>initSelection</code> was specified.</li>
<li>It is now possible to limit the number of options that can be selected in a multi-select component. See the <a href="#maximumSelectionSize">Maximum Selection Size</a> example</li>
</ul>
</div></div>
</section>
@ -240,7 +229,7 @@ $("#e10_3").select2({
<section>
<h2>Browser Compatibility</h2>
<ul>
<li>IE 8+ (7 mostly works except for <a href="https://github.com/ivaynberg/select2/issues/37">issue with z-index</a>)</li>
<li>IE 7+</li>
<li>Chrome 8+</li>
<li>Firefox 3.5+</li>
<li>Safari 3+</li>