RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-25 06:16:08 +03:00
Code Issues Projects Releases Wiki Activity

3.1 release

Browse Source
This commit is contained in:
Igor Vaynberg 2012-08-14 09:29:16 -07:00
parent e2cc72105d
commit 02cb476df6
8 changed files with 3952 additions and 921 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

539
index.html
View File

@ -1,36 +1,36 @@
---
layout: main
title: Select2 3.0
title: Select2 3.1
group: navigation
version: 3.0
version: 3.1
---
<link href="select2-3.0/select2.css" rel="stylesheet"/>
<script src="select2-3.0/select2.js"></script>
<link href="select2-3.1/select2.css" rel="stylesheet"/>
<script src="select2-3.1/select2.js"></script>
<script id="script_e1">
$(function() {
$(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() {
$(document).ready(function() {
$("#e1").select2();
});
});
</script>
<script id="script_e3">
$(document).ready(function() {
$(document).ready(function() {
$("#e3").select2({
minimumInputLength: 2
});
});
});
</script>
<script id="script_e4">
$(document).ready(function() {
$(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;
@ -39,12 +39,12 @@ $("#e4").select2({
formatResult: format,
formatSelection: format
});
});
});
</script>
<script id="script_e5">
$(document).ready(function() {
$(document).ready(function() {
$("#e5").select2({
minimumInputLength: 1,
query: function (query) {
@ -57,7 +57,7 @@ $("#e5").select2({
query.callback(data);
}
});
});
});
</script>
<script>
@ -85,7 +85,7 @@ $("#e5").select2({
</script>
<script id="script_e6">
$(document).ready(function() {
$(document).ready(function() {
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
@ -108,11 +108,11 @@ $("#e6").select2({
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
});
});
</script>
<script id="script_e7">
$(document).ready(function() {
$(document).ready(function() {
$("#e7").select2({
placeholder: "Search for a movie",
minimumInputLength: 3,
@ -139,17 +139,17 @@ $("#e7").select2({
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
});
});
</script>
<script id="script_e9">
$(document).ready(function() {
$(document).ready(function() {
$("#e9").select2();
});
});
</script>
<script id="script_e10">
$(document).ready(function() {
$(document).ready(function() {
$("#e10").select2({
data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
@ -170,10 +170,10 @@ $("#e10_3").select2({
formatResult: format
});
});
});
</script>
<header class="jumbotron subhead">
<header class="jumbotron subhead">
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#changelog">Changelog</a></li>
@ -202,30 +202,41 @@ $("#e10_3").select2({
<li><a href="#about">About</a></li>
</ul>
</div>
</header>
</header>
<section id="changelog">
<h2>Changelog from 2.x</h2>
<section id="changelog">
<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>initSelection</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>
<li>Loading...</li>
<script>
$(function() {
var url="https://api.github.com/repos/ivaynberg/select2/issues?state=closed&milestone=4";
$.ajax({
url: url,
dataType: "jsonp"
}).done(function(issues) {
var list=$("#changelog ul");
var template="<li><a href='$url'><span>#$num</span> </a>$title</li>";
list.empty();
$.each(issues.data, function() {
var markup=template
.replace(/\$url/g, this.html_url)
.replace(/\$num/g, this.number)
.replace(/\$title/g, this.title)
list.append(markup);
});
}).fail(function() {
$("#changelog ul").empty().append("<li class='alert alert-error'>Error retrieving changelog</li>");
});
});
</script>
</ul>
</div></div>
</section>
</section>
<section>
<section>
<h2>Browser Compatibility</h2>
<ul>
<li>IE 7+</li>
@ -234,18 +245,18 @@ $("#e10_3").select2({
<li>Safari 3+</li>
<li>Opera 10.6+</li>
</ul>
</section>
</section>
<section class="examples">
<div class="row">
<section class="examples">
<div class="row">
<div class="span12">
<h2>Examples</h2>
<hr/>
</div>
</div>
</div>
<article class="row" id="basics">
<article class="row" id="basics">
<div class="span4">
<h3>The Basics</h3>
<p>Select2 can take a regular select box like this:</p>
@ -332,9 +343,9 @@ $("#e10_3").select2({
&lt;/body&gt;
</pre>
</div>
</article>
</article>
<article class="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>
@ -347,10 +358,10 @@ $("#e10_3").select2({
<pre class="prettyprint linenums" id="code_e9">
</pre>
</div>
</article>
</article>
<article class="row" id="placeholders">
<article class="row" id="placeholders">
<script id="script_e2">
$(document).ready(function() {
$("#e2").select2({
@ -380,9 +391,9 @@ $("#e2_2").select2({
<pre class="prettyprint linenums" id="code_e2">
</pre>
</div>
</article>
</article>
<article class="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>
@ -394,9 +405,9 @@ $("#e2_2").select2({
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e3"></pre>
</div>
</article>
</article>
<article class="row" id="templating">
<article class="row" id="templating">
<div class="span4">
<h3>Templating</h3>
<p>Various display options of the Select2 component can be changed:</p>
@ -411,22 +422,22 @@ $("#e2_2").select2({
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;select&gt;
&lt;option value="0" data-foo="bar"&gt;option one&lt;/option&gt;
...
&lt;/select&gt;
&lt;/select&gt;
</pre>
<pre class="prettyprint linenums">
function format(state) {
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>
<article class="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>
@ -440,15 +451,15 @@ $("#e2_2").select2({
<pre class="prettyprint linenums" id="code_e5">
</pre>
</div>
</article>
</article>
<script id="script_e19">
$(document).ready(function() {
$(document).ready(function() {
$("#e19").select2({ maximumSelectionSize: 3 });
});
});
</script>
<article class="row" id="maximumSelectionSize">
<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.
@ -462,9 +473,9 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<pre class="prettyprint linenums" id="code_e19">
</pre>
</div>
</article>
</article>
<article class="row" id="data_array">
<article class="row" id="data_array">
<div class="span4">
<h3>Loading Array Data</h3>
<p>Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a <code>query</code> function mentioned in the example above.</p>
@ -486,9 +497,9 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<pre class="prettyprint linenums" id="code_e10">
</pre>
</div>
</article>
</article>
<article class="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>
@ -500,8 +511,8 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<pre class="prettyprint linenums" id="code_e6"></pre>
<p>Select2 uses jQuery's <code>$.ajax</code> function to execute the remote call by default. An alternative <code>transport</code> function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom <code>query</code> function instead of using the <code>ajax</code> helper</p>
</div>
</article>
<article class="row" id="infinite">
</article>
<article class="row" id="infinite">
<div class="span12">
<h3>Infinite Scroll with Remote Data</h3>
<p>Select2 supports lazy-appending of results when the result list is scrolled to the end.
@ -516,11 +527,11 @@ $("#e19").select2({ maximumSelectionSize: 3 });
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e7"></pre>
</div>
</article>
</article>
<article class="row" id="programmatic">
<script id="script_e8">
$(document).ready(function() {
<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"); });
@ -537,8 +548,8 @@ $("#e8_2_set2").click(function () { $("#e8_2").select2("data", [{id: "CA", text:
$("#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"); });
});
</script>
});
</script>
<div class="span4">
<h3>Programmatic Access</h3>
<p>Select2 supports methods that allow programmatic control of the component</p>
@ -571,11 +582,11 @@ $("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e8"></pre>
</div>
</article>
</article>
<article class="row" id="events">
<script id="script_e11">
$(document).ready(function () {
<article class="row" id="events">
<script id="script_e11">
$(document).ready(function () {
$("#e11").select2({
placeholder: "Select report type",
allowClear: true,
@ -597,8 +608,8 @@ $("#e11")
$("#e11_2")
.on("change", function(e) { log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
.on("open", function() { log("open"); });
});
</script>
});
</script>
<div class="span4">
<h3>Events</h3>
@ -617,13 +628,13 @@ $("#e11_2")
<pre class="prettyprint linenums" id="code_e11">
</pre>
</div>
</article>
<article class="row" id="tags">
<script id="script_e12">
$(document).ready(function () {
</article>
<article class="row" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
</script>
});
</script>
<div class="span4">
<h3>Tagging Support</h3>
@ -638,16 +649,40 @@ $("#e12").select2({tags:["red", "green", "blue"]});
<pre class="prettyprint linenums" id="code_e12">
</pre>
</div>
</article>
</article>
<article class="row" id="token">
<script id="script_e20">
$(document).ready(function () {
$("#e20").select2({
tags:["red", "green", "blue"],
tokenSeparators: [",", " "]});
});
</script>
<div class="span4">
<h3>Auto Tokenization</h3>
<article class="row" id="event_ext_change">
<script id="script_e13">
$(document).ready(function () {
<p>Select2 supports ability to add choices automatically as the user is typing into the search field.
This is especially convenient in the tagging usecase where the user can quickly enter a number of tags
by separating them with a comma or a space. Try typing in the search field below and entering a space or a comma</p>
<p><input type="hidden" id="e20" style="width:300px" value="brown"/></p>
<p>Note that the separators are defined in the <a href="#doc-tokenSeparators">tokenSeparators</a> option</code></p>
<p>Note that this example uses the built in <a href="#doc-tokenizer">tokenizer</a> function, but a custom one can be provided in the options.</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e20">
</pre>
</div>
</article>
<article class="row" id="event_ext_change">
<script id="script_e13">
$(document).ready(function () {
$("#e13").select2();
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
});
</script>
});
</script>
<div class="span4">
<h3>Reacting to external value changes</h3>
@ -666,16 +701,16 @@ $("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change");
<pre class="prettyprint linenums" id="code_e13">
</pre>
</div>
</article>
</article>
<article class="row" id="lifecycle">
<script id="script_e14">
$(document).ready(function () {
<article class="row" id="lifecycle">
<script id="script_e14">
$(document).ready(function () {
$("#e14").val(["AL","AZ"]).select2();
$("#e14_init").click(function() { $("#e14").select2(); });
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
});
</script>
});
</script>
<div class="span4">
<h3>Select2 Lifecycle</h3>
@ -690,11 +725,11 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<pre class="prettyprint linenums" id="code_e14">
</pre>
</div>
</article>
</article>
<article class="row" id="lifecycle">
<script id="script_e15">
$(document).ready(function () {
<article class="row" id="lifecycle">
<script id="script_e15">
$(document).ready(function () {
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
$("#e15").on("change", function() { $("#e15_val").html($("#e15").val());});
@ -703,8 +738,8 @@ $("#e15").select2("container").find("ul.select2-choices").sortable({
start: function() { $("#e15").select2("onSortStart"); },
update: function() { $("#e15").select2("onSortEnd"); }
});
});
</script>
});
</script>
<div class="span4">
<h3>Select2 Drag and Drop Sorting</h3>
<p>
@ -719,10 +754,10 @@ $("#e15").select2("container").find("ul.select2-choices").sortable({
<pre class="prettyprint linenums" id="code_e15">
</pre>
</div>
</article>
</article>
<article class="row" id="disabled">
<article class="row" id="disabled">
<script id="script_e16">
$(document).ready(function () {
$("#e16").select2();
@ -742,9 +777,9 @@ $("#e16_disable").click(function() { $("#e16,#e16_2").select2("disable"); });
<pre class="prettyprint linenums" id="code_e16">
</pre>
</div>
</article>
</article>
<article class="row" id="matcher">
<article class="row" id="matcher">
<script id="script_e17">
$(document).ready(function () {
$("#e17").select2({
@ -774,9 +809,9 @@ $("#e17_2").select2({
<pre class="prettyprint linenums" id="code_e17">
</pre>
</div>
</article>
</article>
<article class="row" id="responsive">
<article class="row" id="responsive">
<script id="script_e18">
$(document).ready(function () {
$("#e18,#e18_2").select2();
@ -794,31 +829,31 @@ $("#e18,#e18_2").select2();
<pre class="prettyprint linenums" id="code_e18">
</pre>
</div>
</article>
</article>
</section>
</section>
<!-- -->
<!-- DOCUMENTATION -->
<!-- -->
<!-- -->
<!-- DOCUMENTATION -->
<!-- -->
<section id="documentation">
<section id="documentation">
<div class="row" style="padding-top: 20px;">
<div class="row" style="padding-top: 20px;">
<div class="span12"><h2>Documentation</h2><hr/></div>
</div>
</div>
<div class="row">
<div class="row">
<div class="span12"><h3>Constructor</h3></div>
</div>
<table class="table table-bordered table-striped">
<tr>
</div>
<table class="table table-bordered table-striped">
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
<tr><td>width</td><td>string</td><td>
</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>
@ -827,9 +862,9 @@ $("#e18,#e18_2").select2();
<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>
</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>
The minimum number of results that must be initially (after opening the dropdown for the first time)
populated in order to keep the search field. This
@ -837,17 +872,17 @@ $("#e18,#e18_2").select2();
is not very useful and wastes screen space.
</p>
<p class="alert alert-info">Only applies to single-value select boxes</p>
</td>
</tr>
<tr><td>maximumSelectionSize</td><td>int</td><td>
</td>
</tr>
<tr><td>maximumSelectionSize</td><td>int</td><td>
<p>
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>
</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.
@ -857,14 +892,14 @@ $("#e18,#e18_2").select2();
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>
</td></tr>
<tr><td>separator</td><td>string</td><td>
</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></tr>
<tr>
<td>allowClear</td>
<td>boolean</td>
<td>
@ -885,8 +920,8 @@ $("#e18,#e18_2").select2();
selected option.
</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>
@ -897,8 +932,8 @@ $("#e18,#e18_2").select2();
<code>multiple</code> attribute will be used instead.
</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td>closeOnSelect</td>
<td>boolean</td>
<td>
@ -910,8 +945,17 @@ $("#e18,#e18_2").select2();
Only applies when configured in multi-select mode.
</p>
</td>
</tr>
<tr><td>id</td><td>function</td><td>
</tr>
<tr>
<td>openOnEnter</td>
<td>boolean</td>
<td>
<p>
If set to true the dropdown is opened when the user presses the enter key and Select2 is closed. By default this option is enabled.
</p>
</td>
</tr>
<tr><td>id</td><td>function</td><td>
Function used to get the id from the choice object or a string representing the key under which the id is stored.
<pre>id(object)</pre>
<table class="table table-bordered table-striped">
@ -920,8 +964,8 @@ $("#e18,#e18_2").select2();
<tr><td>&lt;returns&gt;</td><td>string</td><td>the id of the object</td></tr>
</table>
The default implementation expects the object to have a <code>id</code> property that is returned.
</td></tr>
<tr><td id="doc-matcher">matcher</td><td>function</td><td>
</td></tr>
<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, option)</pre>
@ -936,8 +980,8 @@ $("#e18,#e18_2").select2();
</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>
</td></tr>
<tr><td>formatSelection</td><td>function</td><td>
Function used to render the current selection.
<pre>formatSelection(object, container)</pre>
<table class="table table-bordered table-striped">
@ -958,8 +1002,8 @@ $("#e18,#e18_2").select2();
}
</pre>
</p>
</td></tr>
<tr><td>formatResult</td><td>function</td><td>
</td></tr>
<tr><td>formatResult</td><td>function</td><td>
Function used to render a result that the user can select.
<pre>formatResult(object, container, query)</pre>
<table class="table table-bordered table-striped">
@ -981,8 +1025,18 @@ $("#e18,#e18_2").select2();
}
</pre>
</p>
</td></tr>
<tr><td>formatNoMatches</td><td>function</td><td>
</td></tr>
<tr><td>formatResultCssClass</td><td>function</td><td>
Function used to add css classes to result elements
<pre>formatResultCssClass(object)</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 (optional)</td><td>String containing css class names separated by a space</td></tr>
</table>
<p class="alert alert-info">By default when attached to a <code>select</code> css classes from <code>option</code>s will be automatically copied</p>
</td></tr>
<tr><td>formatNoMatches</td><td>function</td><td>
Function used to render the &quot;No matches&quot; message
<pre>formatNoMatches(term)</pre>
<table class="table table-bordered table-striped">
@ -990,8 +1044,17 @@ $("#e18,#e18_2").select2();
<tr><td>term</td><td>string</td><td>Search string entered by user</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>formatInputTooShort</td><td>function</td><td>
</td></tr>
<tr><td>formatSearching</td><td>function</td><td>
Function used to render the &quot;Searching...&quot; message that is displayed while
search is in progress
<pre>formatSearching()</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>formatInputTooShort</td><td>function</td><td>
Function used to render the &quot;Search input too short&quot; message
<pre>formatInputTooShort(term, minLength)</pre>
<table class="table table-bordered table-striped">
@ -1000,8 +1063,8 @@ $("#e18,#e18_2").select2();
<tr><td>minLength</td><td>int</td><td>Minimum required term length</td></tr>
<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>
</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">
@ -1009,8 +1072,8 @@ $("#e18,#e18_2").select2();
<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>
</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.
<pre>createSearchChoice(term)</pre>
@ -1027,8 +1090,8 @@ $("#e18,#e18_2").select2();
<p class="alert alert-warning">When used in combination with <code>input[type=hidden]</code> tag care
must be taken to sanitize the <code>id</code> attribute of the choice object, especially stripping
<code>,</code> as it is used as a value separator</p>
</td></tr>
<tr><td>initSelection</td><td>function</td><td>
</td></tr>
<tr><td>initSelection</td><td>function</td><td>
Called when Select2 is created to allow the user to initialize the selection based on the value of the
element select2 is attached to.
<p>
@ -1054,8 +1117,38 @@ $("#tags").select2({
}
});
</pre>
</td></tr>
<tr id="doc-query">
</td></tr>
<tr id="doc-tokenizer"><td>tokenizer</td><td>function</td><td>
A tokenizer function can process the input typed into the search field after every keystroke and extract
and select choices. This is useful, for example, in tagging scenarios where the user can create tags quickly
by separating them with a comma or a space instead of pressing enter.
<p class="alert alert-info">Tokenizer only applies to multi-selects</p>
<pre>tokenizer(input, selection, selectCallback, opts)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>input</td><td>string</td><td>The text entered into the search field so far</td></tr>
<tr><td>selection</td><td>array</td><td>Array of objects representing the current selection.
Useful if tokenizer needs to filter out duplicates.</td></tr>
<tr><td>selectCallback</td><td>function</td><td>Callback that can be used to add objects to the selection</td></tr>
<tr><td>opts</td><td>object</td><td>Options with which Select2 was initialized. Useful if tokenizer needs to access some properties in the options.</td></tr>
<tr><td>&lt;returns&gt;</td><td>string (optional)</td><td>Returns the string to which the input of
the search field should be set to. Usually this is the remainder, of any, of the string after
the tokens have been stripped. If <code>undefined</code> or <code>null</code> is returned the
input of the search field is unchanged.</code></td></tr>
</table>
The default tokenizer will only be used if the <code>tokenSeparators</code> and <code>createSearchChoice</code>
options are specified. The default tokenizer will split the string using any separator in <code>tokenSeparators</code>
and will create and select choice objects using <code>createSearhChoice</code> option. It will also
ignore duplicates, silently swallowing those tokens.
</td></tr>
<tr id="doc-tokenSeparators"><td>tokenSeparators</td><td>array</td><td>
An array of strings that define token separators for the default <a href="doc-tokenizer">tokenizer</a>
function. By default, this option is set to an empty array which means tokenization using the default
tokenizer is disabled. Usually it is sensible to set this option to a value similar to <code>[',', ' ']</code>
</td></tr>
<tr id="doc-query">
<td>query</td>
<td>function</td>
<td>
@ -1107,8 +1200,8 @@ $("#tags").select2({
</pre>
</p>
</td>
</tr>
<tr><td>ajax</td><td>object</td><td>
</tr>
<tr><td>ajax</td><td>object</td><td>
Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
<table class="table table-bordered table-striped">
@ -1142,38 +1235,38 @@ $("#tags").select2({
</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>
</td></tr>
<tr><td>data</td><td>array/object</td><td>
</td></tr>
<tr><td>data</td><td>array/object</td><td>
Options for the built in query function that works with arrays.
<p>If this element contains an array, each element in the array must contain <code>id</code> and <code>text</code> keys</p>
<p>Alternatively, this element can be specified as an object in which <code>results</code> key must contain the data as an array and a <code>text</code> key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array</p>
</td></tr>
<tr><td>tags</td><td>array/function</td><td>
</td></tr>
<tr><td>tags</td><td>array/function</td><td>
Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
this options attribute which is either an <code>array</code> or a <code>function</code> that returns an
array of <code>objects</code> or <code>strings</code>. If <code>strings</code> are used instead of <code>objects</code>
they will be converted into an object that has an <code>id</code> and <code>text</code> attribute equal
to the value of the <code>string</code>.
</td></tr>
<tr><td>containerCss</td><td>function/object</td><td>
</td></tr>
<tr><td>containerCss</td><td>function/object</td><td>
Inline css that will be added to select2's container. Either an object containing css property/value key pairs or a function that returns such an object.
</td></tr>
<tr><td>containerCssClass</td><td>function/string</td><td>
</td></tr>
<tr><td>containerCssClass</td><td>function/string</td><td>
Css class that will be added to select2's container tag
</td></tr>
<tr><td>dropdownCss</td><td>function/object</td><td>
</td></tr>
<tr><td>dropdownCss</td><td>function/object</td><td>
Inline css that will be added to select2's dropdown container. Either an object containing css property/value key pairs or a function that returns such an object.
</td></tr>
<tr><td>dropdownCssClass</td><td>function/string</td><td>
</td></tr>
<tr><td>dropdownCssClass</td><td>function/string</td><td>
Css class that will be added to select2's dropdown container
</td></tr>
</table>
</td></tr>
</table>
<div class="row">
<div class="row">
<div class="span12"><h3>val</h3></div>
</div>
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
<table class="table table-bordered table-striped">
</div>
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
<table class="table table-bordered table-striped">
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
@ -1196,63 +1289,63 @@ $("#tags").select2({
</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>
</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>
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
<div class="row">
<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>
<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="row">
<div class="span12"><h3>destroy</h3></div>
</div>
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
</div>
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
<div class="row">
<div class="row">
<div class="span12"><h3>open</h3></div>
</div>
<p>Opens the dropdown</p>
<div class="row">
</div>
<p>Opens the dropdown</p>
<div class="row">
<div class="span12"><h3>close</h3></div>
</div>
<p>Closes the dropdown</p>
<div class="row">
</div>
<p>Closes the dropdown</p>
<div class="row">
<div class="span12"><h3>disable</h3></div>
</div>
<p>Disables Select2. During this mode the user is not allowed to manipulate the selection.</p>
<div class="row">
</div>
<p>Disables Select2. During this mode the user is not allowed to manipulate the selection.</p>
<div class="row">
<div class="span12"><h3>enable</h3></div>
</div>
<p>Enables Select2.</p>
</div>
<p>Enables Select2.</p>
<div class="row">
<div class="row">
<div class="span12"><h3>container</h3></div>
</div>
<p>Retrieves the main container element that wraps all of DOM added by Select2
</div>
<p>Retrieves the main container element that wraps all of DOM added by Select2
Example: <code>console.log($("#tags").select2("container"));</code></p>
<div class="row">
<div class="row">
<div class="span12"><h3>onSortStart</h3></div>
</div>
<p>Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
</div>
<p>Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
Example: <code>$("#tags").select2("onSortStart");</code></p>
<div class="row">
<div class="row">
<div class="span12"><h3>onSortEnd</h3></div>
</div>
<p>Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
</div>
<p>Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
Example: <code>$("#tags").select2("onSortEnd");</code>
</p>
</p>
<div class="row">
<div class="row">
<div class="span12"><h2>Events</h2></div>
</div>
</div>
<div class="row">
<div class="row">
<div class="span12">
<h3>change</h3>
<p>Fired when selection is changed.</p>
@ -1265,25 +1358,25 @@ $("#tags").select2({
</dl>
</p>
</div>
</div>
<div class="row zebra">
</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>
</div>
</section>
</section>
<div class="row">
<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>
<!--
<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there</div>

511
select2-3.1/select2.css Executable file
View File

@ -0,0 +1,511 @@
/*
Version: 3.1 Timestamp: Tue Aug 14 09:05:17 PDT 2012
*/
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
vertical-align: top;
}
.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,
.select2-results .select2-searching,
.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; }

2348
select2-3.1/select2.js Executable file
View File

File diff suppressed because it is too large Load Diff

79
select2-3.1/select2.min.js vendored Normal file
View File

@ -0,0 +1,79 @@
/*
Copyright 2012 Igor Vaynberg
Version: 3.1 Timestamp: Tue Aug 14 09:05:17 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(e){"undefined"==typeof e.fn.each2&&e.fn.extend({each2:function(g){for(var n=e([0]),h=-1,m=this.length;++h<m&&(n.context=n[0]=this[h])&&!1!==g.call(n[0],h,n););return this}})})(jQuery);
(function(e,g){function n(a){return a&&"string"===typeof a?a.replace(/&/g,"&amp;"):a}function h(a,b){var c=0,d=b.length,i;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(i=b[c],i.constructor===String){if(0===i.localeCompare(a))return c}else if(i===a)return c;return-1}function m(a,b){return a===b?!0:a===g||b===g||null===a||null===b?!1:a.constructor===String?0===a.localeCompare(b):b.constructor===String?0===b.localeCompare(a):
!1}function z(a,b){var c,d,i;if(null===a||1>a.length)return[];c=a.split(b);d=0;for(i=c.length;d<i;d+=1)c[d]=e.trim(c[d]);return c}function A(a,b){var c;return function(){window.clearTimeout(c);c=window.setTimeout(b,a)}}function k(a){a.preventDefault();a.stopPropagation()}function B(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 C(a){var b,c=0,d=null,i=a.quietMillis||100;return function(j){window.clearTimeout(b);b=window.setTimeout(function(){var b=c+=1,i=a.data,f=a.transport||e.ajax,g=a.traditional||!1,I=a.type||"GET",i=i.call(this,j.term,j.page,j.context);null!==d&&d.abort();d=f.call(null,{url:a.url,dataType:a.dataType,data:i,type:I,traditional:g,success:function(d){b<c||(d=a.results(d,j.page),j.callback(d))}})},i)}}function D(a){var b=a,c,d=function(a){return""+a.text};e.isArray(b)||(d=b.text,e.isFunction(d)||
(c=b.text,d=function(a){return a[c]}),b=b.results);return function(a){var c=a.term,f={};if(c==="")a.callback({results:b});else{f.results=e(b).filter(function(){return a.matcher(c,d(this))}).get();a.callback(f)}}}function E(a){return e.isFunction(a)?a:function(b){var c=b.term,d={results:[]};e(a).each(function(){var a=this.text!==g,e=a?this.text:this;if(""===c||b.matcher(c,e))d.results.push(a?this:{id:this,text:this})});b.callback(d)}}function t(a){if(e.isFunction(a))return!0;if(!a)return!1;throw Error("formatterName must be a function or a falsy value");
}function u(a){return e.isFunction(a)?a():a}function F(a){var b=0;e.each(a,function(a,d){d.children?b+=F(d.children):b++});return b}function J(a,b,c,d){var i=a,e=!1,f,r,o,l;if(!d.createSearchChoice||!d.tokenSeparators||1>d.tokenSeparators.length)return g;for(;;){e=-1;r=0;for(o=d.tokenSeparators.length;r<o&&!(l=d.tokenSeparators[r],e=a.indexOf(l),0<=e);r++);if(0>e)break;f=a.substring(0,e);a=a.substring(e+l.length);if(0<f.length&&(f=d.createSearchChoice(f,b),f!==g&&null!==f&&d.id(f)!==g&&null!==d.id(f))){e=
!1;r=0;for(o=b.length;r<o;r++)if(m(d.id(f),d.id(b[r]))){e=!0;break}e||c(f)}}if(0!=i.localeCompare(a))return a}function w(a,b){var c=function(){};c.prototype=new a;c.prototype.constructor=c;c.prototype.parent=a.prototype;c.prototype=e.extend(c.prototype,b);return c}if(window.Select2===g){var f,v,x,y,G,q;f={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 f.LEFT:case f.RIGHT:case f.UP:case f.DOWN:return!0}return!1},
isControl:function(a){switch(a.which){case f.SHIFT:case f.CTRL:case f.ALT:return!0}return a.metaKey?!0:!1},isFunctionKey:function(a){a=a.which?a.which:a;return 112<=a&&123>=a}};var K=1;G=function(){return K++};e(document).delegate("*","mousemove",function(a){e.data(document,"select2-lastpos",{x:a.pageX,y:a.pageY})});e(document).ready(function(){e(document).delegate("*","mousedown touchend",function(a){var b=e(a.target).closest("div.select2-container").get(0),c;b?e(document).find("div.select2-container-active").each(function(){this!==
b&&e(this).data("select2").blur()}):(b=e(a.target).closest("div.select2-drop").get(0),e(document).find("div.select2-drop-active").each(function(){this!==b&&e(this).data("select2").blur()}));b=e(a.target);c=b.attr("for");"LABEL"===a.target.tagName&&(c&&0<c.length)&&(b=e("#"+c),b=b.data("select2"),b!==g&&(b.focus(),a.preventDefault()))})});v=w(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")!==
g&&null!==a.element.data("select2")&&this.destroy();this.enabled=!0;this.container=this.createContainer();this.containerId="s2id"+G();this.container.attr("id",this.containerId);var d=!1,i;this.body=function(){!1===d&&(i=a.element.closest("body"),d=!0);return i};a.element.attr("class")!==g&&this.container.addClass(a.element.attr("class"));this.container.css(u(a.containerCss));this.container.addClass(u(a.containerCssClass));this.opts.element.data("select2",this).hide().before(this.container);this.container.data("select2",
this);this.dropdown=this.container.find(".select2-drop");this.dropdown.addClass(u(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=e.data(document,"select2-lastpos");(b===g||b.x!==a.pageX||b.y!==a.pageY)&&
e(a.target).trigger("mousemove-filtered",a)});this.dropdown.delegate(".select2-results","mousemove-filtered",this.bind(this.highlightUnderEvent));var f=this.results,H=A(80,function(a){f.trigger("scroll-debounced",a)});f.bind("scroll",function(a){0<=h(a.target,f.get())&&H(a)});this.dropdown.delegate(".select2-results","scroll-debounced",this.bind(this.loadMoreIfNeeded));e.fn.mousewheel&&b.mousewheel(function(a,c,d,e){c=b.scrollTop();0<e&&0>=c-e?(b.scrollTop(0),k(a)):0>e&&b.get(0).scrollHeight-b.scrollTop()+
e<=b.height()&&(b.scrollTop(b.get(0).scrollHeight-b.height()),k(a))});c.bind("keydown",function(){e.data(c,"keyup-change-value")===g&&e.data(c,"keyup-change-value",c.val())});c.bind("keyup",function(){var a=e.data(c,"keyup-change-value");a!==g&&c.val()!==a&&(e.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<e(a.target).closest(".select2-result-selectable:not(.select2-disabled)").length?(this.highlightUnderEvent(a),this.selectHighlighted(a)):this.focusSearch();k(a)}));this.dropdown.bind("click mouseup mousedown",function(a){a.stopPropagation()});e.isFunction(this.opts.initSelection)&&(this.initSelection(),this.monitorSource());(a.element.is(":disabled")||a.element.is("[readonly='readonly']"))&&this.disable()},destroy:function(){var a=
this.opts.element.data("select2");a!==g&&(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);c&&e.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=e.extend({},{populateResults:function(b,
c,d){var f,o=this.opts.id,l=this;f=function(b,c,i){var j,k,h,m,s,p,q;j=0;for(k=b.length;j<k;j=j+1){h=b[j];m=o(h)!==g;s="children"in h&&h.children.length>0;p=e("<li></li>");p.addClass("select2-results-dept-"+i);p.addClass("select2-result");p.addClass(m?"select2-result-selectable":"select2-result-unselectable");s&&p.addClass("select2-result-with-children");p.addClass(l.opts.formatResultCssClass(h));m=e("<div></div>");m.addClass("select2-result-label");q=a.formatResult(h,m,d);q!==g&&m.html(n(q));p.append(m);
if(s){s=e("<ul></ul>");s.addClass("select2-result-sub");f(h.children,s,i+1);p.append(s)}p.data("select2-data",h);c.append(p)}};f(c,b,0)}},e.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,f,o,l;l=function(b,c){var e;if(b.is("option"))a.matcher(d,b.text(),b)&&c.push({id:b.attr("value"),text:b.text(),element:b.get(),css:b.attr("class")});else if(b.is("optgroup")){e={text:b.attr("label"),
children:[],element:b.get(),css:b.attr("class")};b.children().each2(function(a,b){l(b,e.children)});e.children.length>0&&c.push(e)}};f=b.children();if(this.getPlaceholder()!==g&&f.length>0){o=f[0];e(o).text()===""&&(f=f.not(o))}f.each2(function(a,b){l(b,c.results)});a.callback(c)}),a.id=function(a){return a.id},a.formatResultCssClass=function(a){return a.css};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=C(a.ajax)}else"data"in a?a.query=D(a.data):
"tags"in a&&(a.query=E(a.tags),a.createSearchChoice=function(a){return{id:a,text:a}},a.initSelection=function(b,c){var d=[];e(z(b.val(),a.separator)).each(function(){var b=this,c=this,i=a.tags;e.isFunction(i)&&(i=i());e(i).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=e.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(),i=e(window).scrollTop()+document.documentElement.clientHeight,b=a.top+b,i=b+d<=i,f=a.top-d>=this.body().scrollTop(),g;this.dropdown.hasClass("select2-drop-above")?(g=!0,!f&&i&&(g=!1)):(g=!1,!i&&f&&(g=!0));g?(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(){var a=this.containerId,b="#"+a,c="scroll."+a,d="resize."+a;this.container.parents().each(function(){e(this).bind(c,function(){var a=e(b);0==a.length&&e(this).unbind(c);a.select2("close")})});e(window).bind(d,function(){var a=e(b);0==a.length&&e(window).unbind(d);a.select2("close")});this.clearDropdownAlignmentPreference();" "===this.search.val()&&this.search.val("");this.dropdown.css(u(this.opts.dropdownCss));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(){if(this.opened()){var a=this;this.container.parents().each(function(){e(this).unbind("scroll."+a.containerId)});e(window).unbind("resize."+this.containerId);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,f;c=this.highlight();0>c||(0==c?a.scrollTop(0):(b=a.find(".select2-result-selectable"),d=e(b[c]),f=d.offset().top+d.outerHeight(),c===b.length-1&&(b=a.find("li.select2-more-results"),0<b.length&&(f=b.offset().top+b.outerHeight())),b=a.offset().top+a.outerHeight(),f>b&&a.scrollTop(a.scrollTop()+(f-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=e(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 h(b.filter(".select2-highlighted")[0],b.get());a>=b.length&&(a=b.length-1);0>a&&(a=0);
b.removeClass("select2-highlighted");e(b[a]).addClass("select2-highlighted");this.ensureHighlightVisible()},countSelectableResults:function(){return this.results.find(".select2-result-selectable").not(".select2-disabled").length},highlightUnderEvent:function(a){a=e(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,e=this,f=this.search.val(),g=this.context;0!==b.length&&(c=b.offset().top-a.offset().top-a.height(),0>=c&&(b.addClass("select2-active"),this.opts.query({term:f,page:d,context:g,matcher:this.opts.matcher,callback:this.bind(function(c){e.opts.populateResults.call(this,a,c.results,{term:f,page:d,context:g});!0===c.more?(b.detach().appendTo(a).text(e.opts.formatLoadMore(d+1)),window.setTimeout(function(){e.loadMoreIfNeeded()},
10)):b.remove();e.positionDropdown();e.resultsPage=d})})))},tokenize:function(){},updateResults:function(a){function b(){f.scrollTop(0);d.removeClass("select2-active");k.positionDropdown()}function c(a){f.html(n(a));b()}var d=this.search,f=this.results,j=this.opts,h,k=this;if(!(!0!==a&&(!1===this.showSearchInput||!this.opened()))){d.addClass("select2-active");if(1<=j.maximumSelectionSize&&(h=this.data(),e.isArray(h)&&h.length>=j.maximumSelectionSize&&t(j.formatSelectionTooBig,"formatSelectionTooBig"))){c("<li class='select2-selection-limit'>"+
j.formatSelectionTooBig(j.maximumSelectionSize)+"</li>");return}d.val().length<j.minimumInputLength&&t(j.formatInputTooShort,"formatInputTooShort")?c("<li class='select2-no-results'>"+j.formatInputTooShort(d.val(),j.minimumInputLength)+"</li>"):(c("<li class='select2-searching'>"+j.formatSearching()+"</li>"),h=this.tokenize(),h!=g&&null!=h&&d.val(h),this.resultsPage=1,j.query({term:d.val(),page:this.resultsPage,context:null,matcher:j.matcher,callback:this.bind(function(h){var l;this.context=h.context===
g?null:h.context;this.opts.createSearchChoice&&""!==d.val()&&(l=this.opts.createSearchChoice.call(null,d.val(),h.results),l!==g&&null!==l&&k.id(l)!==g&&null!==k.id(l)&&0===e(h.results).filter(function(){return m(k.id(this),k.id(l))}).length&&h.results.unshift(l));0===h.results.length&&t(j.formatNoMatches,"formatNoMatches")?c("<li class='select2-no-results'>"+j.formatNoMatches(d.val())+"</li>"):(f.empty(),k.opts.populateResults.call(this,f,h.results,{term:d.val(),page:this.resultsPage,context:null}),
!0===h.more&&t(j.formatLoadMore,"formatLoadMore")&&(f.append("<li class='select2-more-results'>"+n(j.formatLoadMore(this.resultsPage))+"</li>"),window.setTimeout(function(){k.loadMoreIfNeeded()},10)),this.postprocessResults(h,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,f;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!==g){a=a.split(";");d=0;for(f=a.length;d<f;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 e.isFunction(this.opts.width)?this.opts.width():this.opts.width}.call(this);null!==a&&this.container.attr("style","width: "+a)}});x=w(v,{createContainer:function(){return e("<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===f.PAGE_UP||a.which===f.PAGE_DOWN)k(a);else if(this.opened())switch(a.which){case f.UP:case f.DOWN:this.moveHighlight(a.which===f.UP?-1:1);k(a);break;case f.TAB:case f.ENTER:this.selectHighlighted();k(a);break;case f.ESC:this.cancel(a),k(a)}else a.which===f.TAB||f.isControl(a)||f.isFunctionKey(a)||a.which===f.ESC||!1===
this.opts.openOnEnter&&a.which===f.ENTER||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(){this.opened()?(this.close(),this.selection.focus()):this.enabled&&this.open()}));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.opened()||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===f.PAGE_UP||a.which===f.PAGE_DOWN)k(a);else if(!(a.which===
f.TAB||f.isControl(a)||f.isFunctionKey(a)||a.which===f.ESC)&&!(!1===this.opts.openOnEnter&&a.which===f.ENTER))if(a.which==f.DELETE)this.opts.allowClear&&this.clear();else{this.open();if(a.which!==f.ENTER&&!(48>a.which)){var b=String.fromCharCode(a.which).toLowerCase();a.shiftKey&&(b=b.toUpperCase());this.search.focus();this.search.val(b)}k(a)}}));a.delegate("abbr","mousedown",this.bind(function(a){this.enabled&&(this.clear(),k(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!==g&&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");e.isFunction(c)&&c({id:d.attr("value"),text:d.text()})});return a},setPlaceholder:function(){var a=this.getPlaceholder();""===this.opts.element.val()&&a!==g&&!(this.select&&""!==this.select.find("option:first").text())&&(this.selection.find("span").html(n(a)),this.selection.addClass("select2-default"),this.selection.find("abbr").hide())},postprocessResults:function(a,
b){var c=0,d=this,f=!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&&(f=this.showSearchInput=F(a.results)>=this.opts.minimumResultsForSearch,this.dropdown.find(".select2-search")[f?"removeClass":"addClass"]("select2-search-hidden"),e(this.dropdown,this.container)[f?"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!==g&&b.append(n(a));this.selection.removeClass("select2-default");this.opts.allowClear&&this.getPlaceholder()!==g&&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===g)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==g&&(b=null),b;!a||
""===a?this.clear():(this.opts.element.val(!a?"":this.id(a)),this.updateSelection(a))}});y=w(v,{createContainer:function(){return e("<div></div>",{"class":"select2-container select2-container-multi"}).html(" <ul class='select2-choices'> <li class='select2-search-field'> <input type='text' autocomplete='off' 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()})});e.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===f.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);k(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 f.UP:case f.DOWN:this.moveHighlight(b.which===f.UP?-1:1);k(b);return;case f.ENTER:case f.TAB:this.selectHighlighted();k(b);return;case f.ESC:this.cancel(b);k(b);
return}if(!(b.which===f.TAB||f.isControl(b)||f.isFunctionKey(b)||b.which===f.BACKSPACE||b.which===f.ESC)&&!(!1===this.opts.openOnEnter&&b.which===f.ENTER))this.open(),(b.which===f.PAGE_UP||b.which===f.PAGE_DOWN)&&k(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!==g&&b!==null){a.updateSelection(b);a.close();a.clearSearch()}})}},clearSearch:function(){var a=this.getPlaceholder();a!==g&&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;e(a).each(function(){0>h(d.id(this),b)&&(b.push(d.id(this)),c.push(this))});a=c;this.selection.find(".select2-search-choice").remove();e(a).each(function(){d.addSelectedChoice(this)});d.postprocessResults()},tokenize:function(){var a=this.search.val(),a=this.opts.tokenizer(a,this.data(),this.bind(this.onSelect),this.opts);null!=a&&a!=g&&(this.search.val(a),0<a.length&&this.open())},onSelect:function(a){this.addSelectedChoice(a);this.select&&this.postprocessResults();this.opts.closeOnSelect?
(this.close(),this.search.width(10)):0<this.countSelectableResults()?(this.search.width(10),this.resizeSearch(),this.positionDropdown()):this.close();this.triggerChange({added:a});this.focusSearch()},cancel:function(){this.close();this.focusSearch()},addSelectedChoice:function(a){var b=e("<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(),f;f=this.opts.formatSelection(a,b);b.find("div").replaceWith("<div>"+
n(f)+"</div>");b.find(".select2-search-choice-close").bind("mousedown",k).bind("click dblclick",this.bind(function(a){this.enabled&&(e(a.target).closest(".select2-search-choice").fadeOut("fast").animate({width:"hide"},50,this.bind(function(){this.unselect(e(a.target));this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");this.close();this.focusSearch()})).dequeue(),k(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=h(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 e=d.id(c.data("select2-data"));0<=h(e,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,f=this.search.outerWidth()-this.search.width();a=this.search;q||(c=a[0].currentStyle||window.getComputedStyle(a[0],null),q=e("<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"}),e("body").append(q));
q.text(a.val());a=q.width()+10;b=this.search.offset().left;c=this.selection.width();d=this.selection.offset().left;b=c-(b-d)-f;b<a&&(b=c-f);40>b&&(b=c-f);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 z(a,this.opts.separator)},setVal:function(a){var b;this.select?this.select.val(a):(b=[],e(a).each(function(){0>h(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:e(this).attr("value"),text:e(this).text()})}),this.updateSelection(b);else{if(this.opts.initSelection===g)throw Error("val() cannot be called if initSelection() is not defined");this.opts.initSelection(this.opts.element,function(a){var b=e(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(e(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 e(this).data("select2-data")}).get();a||(a=[]);c=e.map(a,function(a){return b.opts.id(a)});this.setVal(c);this.updateSelection(a);this.clearSearch()}});e.fn.select2=function(){var a=Array.prototype.slice.call(arguments,0),b,c,d,f,j="val destroy opened 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?{}:e.extend({},a[0]),b.element=e(this),"select"===b.element.get(0).tagName.toLowerCase()?f=b.element.attr("multiple"):(f=b.multiple||!1,"tags"in b&&(b.multiple=f=!0)),c=f?new y:new x,c.init(b);else if("string"===typeof a[0]){if(0>h(a[0],j))throw"Unknown method: "+a[0];d=g;c=e(this).data("select2");if(c!==g&&(d="container"===a[0]?c.container:c[a[0]].apply(c,a.slice(1)),d!==g))return!1}else throw"Invalid arguments to select2 plugin: "+
a;});return d===g?this:d};e.fn.select2.defaults={width:"copy",closeOnSelect:!0,openOnEnter:!0,containerCss:{},dropdownCss:{},containerCssClass:"",dropdownCssClass:"",formatResult:function(a,b,c){b=[];B(a.text,c.term,b);return b.join("")},formatSelection:function(a){return a.text},formatResultCssClass:function(){return g},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..."},formatSearching:function(){return"Searching..."},minimumResultsForSearch:0,minimumInputLength:0,maximumSelectionSize:0,id:function(a){return a.id},matcher:function(a,b){return 0<=b.toUpperCase().indexOf(a.toUpperCase())},separator:",",tokenSeparators:[],tokenizer:J};window.Select2={query:{ajax:C,local:D,tags:E},util:{debounce:A,markMatch:B},"class":{"abstract":v,single:x,multi:y}}}})(jQuery);

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

10
select2-latest.html
View File

@ -2,7 +2,7 @@
layout: main
title: Select2 Latest
group: navigation
version: 3.1
version: 3.2
---
<link href="select2-master/select2.css" rel="stylesheet"/>
@ -434,17 +434,17 @@ $("#e2_2").select2({
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;select&gt;
&lt;option value="0" data-foo="bar"&gt;option one&lt;/option&gt;
...
&lt;/select&gt;
&lt;/select&gt;
</pre>
<pre class="prettyprint linenums">
function format(state) {
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>

2
select2-master

@ -1 +1 @@
Subproject commit 816af4425b5dd867dd8378a96c107759054e5e49
Subproject commit 52907f2332620b4625774ec5d58ed91d605c8899