3.1 release
This commit is contained in:
Igor Vaynberg
parent
e2cc72105d
commit
02cb476df6
539
index.html
539
index.html
@ -1,36 +1,36 @@
|
|||||||
---
|
---
|
||||||
layout: main
|
layout: main
|
||||||
title: Select2 3.0
|
title: Select2 3.1
|
||||||
group: navigation
|
group: navigation
|
||||||
version: 3.0
|
version: 3.1
|
||||||
---
|
---
|
||||||
|
|
||||||
<link href="select2-3.0/select2.css" rel="stylesheet"/>
|
<link href="select2-3.1/select2.css" rel="stylesheet"/>
|
||||||
<script src="select2-3.0/select2.js"></script>
|
<script src="select2-3.1/select2.js"></script>
|
||||||
|
|
||||||
<script id="script_e1">
|
<script id="script_e1">
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
var opts=$("#source").html(), opts2="<option></option>"+opts;
|
var opts=$("#source").html(), opts2="<option></option>"+opts;
|
||||||
$("select.populate").each(function() { var e=$(this); e.html(e.hasClass("placeholder")?opts2:opts); });
|
$("select.populate").each(function() { var e=$(this); e.html(e.hasClass("placeholder")?opts2:opts); });
|
||||||
$(".examples article:odd").addClass("zebra");
|
$(".examples article:odd").addClass("zebra");
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e1").select2();
|
$("#e1").select2();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e3">
|
<script id="script_e3">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e3").select2({
|
$("#e3").select2({
|
||||||
minimumInputLength: 2
|
minimumInputLength: 2
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e4">
|
<script id="script_e4">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
function format(state) {
|
function format(state) {
|
||||||
if (!state.id) return state.text; // optgroup
|
if (!state.id) return state.text; // optgroup
|
||||||
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
|
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
|
||||||
@ -39,12 +39,12 @@ $("#e4").select2({
|
|||||||
formatResult: format,
|
formatResult: format,
|
||||||
formatSelection: format
|
formatSelection: format
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script id="script_e5">
|
<script id="script_e5">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e5").select2({
|
$("#e5").select2({
|
||||||
minimumInputLength: 1,
|
minimumInputLength: 1,
|
||||||
query: function (query) {
|
query: function (query) {
|
||||||
@ -57,7 +57,7 @@ $("#e5").select2({
|
|||||||
query.callback(data);
|
query.callback(data);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -85,7 +85,7 @@ $("#e5").select2({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e6">
|
<script id="script_e6">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e6").select2({
|
$("#e6").select2({
|
||||||
placeholder: "Search for a movie",
|
placeholder: "Search for a movie",
|
||||||
minimumInputLength: 1,
|
minimumInputLength: 1,
|
||||||
@ -108,11 +108,11 @@ $("#e6").select2({
|
|||||||
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
|
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e7">
|
<script id="script_e7">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e7").select2({
|
$("#e7").select2({
|
||||||
placeholder: "Search for a movie",
|
placeholder: "Search for a movie",
|
||||||
minimumInputLength: 3,
|
minimumInputLength: 3,
|
||||||
@ -139,17 +139,17 @@ $("#e7").select2({
|
|||||||
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
|
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e9">
|
<script id="script_e9">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e9").select2();
|
$("#e9").select2();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script id="script_e10">
|
<script id="script_e10">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$("#e10").select2({
|
$("#e10").select2({
|
||||||
data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
|
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
|
formatResult: format
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="jumbotron subhead">
|
<header class="jumbotron subhead">
|
||||||
<div class="subnav">
|
<div class="subnav">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li><a href="#changelog">Changelog</a></li>
|
<li><a href="#changelog">Changelog</a></li>
|
||||||
@ -202,30 +202,41 @@ $("#e10_3").select2({
|
|||||||
<li><a href="#about">About</a></li>
|
<li><a href="#about">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<section id="changelog">
|
<section id="changelog">
|
||||||
<h2>Changelog from 2.x</h2>
|
<h2>Changelog from 3.0</h2>
|
||||||
<div class="row"><div class="span12">
|
<div class="row"><div class="span12">
|
||||||
<ul>
|
<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>Loading...</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>
|
<script>
|
||||||
<li>Signature of <code>initSelection</code> has changed to support initialization from asynchronous requests.</li>
|
$(function() {
|
||||||
<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>
|
var url="https://api.github.com/repos/ivaynberg/select2/issues?state=closed&milestone=4";
|
||||||
<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>
|
$.ajax({
|
||||||
<li>Separator in multi-valued selects is now cofigurable, <code>,</code> still the default. See <code>separator</code> option in the docs.</li>
|
url: url,
|
||||||
<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>
|
dataType: "jsonp"
|
||||||
<li><code>change</code> event now specifies which elements were added/removed</li>
|
}).done(function(issues) {
|
||||||
<li><code>width</code> option now supports various strategies instead of always being copied from the source element</li>
|
var list=$("#changelog ul");
|
||||||
<li>Clicks on a <code>label</code> associated with the source element are now redirected to Select2.</li>
|
var template="<li><a href='$url'><span>#$num</span> </a>$title</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>
|
list.empty();
|
||||||
<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>
|
$.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>
|
</ul>
|
||||||
</div></div>
|
</div></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Browser Compatibility</h2>
|
<h2>Browser Compatibility</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>IE 7+</li>
|
<li>IE 7+</li>
|
||||||
@ -234,18 +245,18 @@ $("#e10_3").select2({
|
|||||||
<li>Safari 3+</li>
|
<li>Safari 3+</li>
|
||||||
<li>Opera 10.6+</li>
|
<li>Opera 10.6+</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="examples">
|
<section class="examples">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h2>Examples</h2>
|
<h2>Examples</h2>
|
||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<article class="row" id="basics">
|
<article class="row" id="basics">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>The Basics</h3>
|
<h3>The Basics</h3>
|
||||||
<p>Select2 can take a regular select box like this:</p>
|
<p>Select2 can take a regular select box like this:</p>
|
||||||
@ -332,9 +343,9 @@ $("#e10_3").select2({
|
|||||||
</body>
|
</body>
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="multi">
|
<article class="row" id="multi">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Multi-Value Select Boxes</h3>
|
<h3>Multi-Value Select Boxes</h3>
|
||||||
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||||
@ -347,10 +358,10 @@ $("#e10_3").select2({
|
|||||||
<pre class="prettyprint linenums" id="code_e9">
|
<pre class="prettyprint linenums" id="code_e9">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
<article class="row" id="placeholders">
|
<article class="row" id="placeholders">
|
||||||
<script id="script_e2">
|
<script id="script_e2">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e2").select2({
|
$("#e2").select2({
|
||||||
@ -380,9 +391,9 @@ $("#e2_2").select2({
|
|||||||
<pre class="prettyprint linenums" id="code_e2">
|
<pre class="prettyprint linenums" id="code_e2">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="minimum">
|
<article class="row" id="minimum">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Minimum Input</h3>
|
<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>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>
|
<h3>Example Code</h3>
|
||||||
<pre class="prettyprint linenums" id="code_e3"></pre>
|
<pre class="prettyprint linenums" id="code_e3"></pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="templating">
|
<article class="row" id="templating">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Templating</h3>
|
<h3>Templating</h3>
|
||||||
<p>Various display options of the Select2 component can be changed:</p>
|
<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><option></code> (or <optgroup>) and use them inside temptlating functions:
|
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside temptlating functions:
|
||||||
</p>
|
</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<select>
|
<select>
|
||||||
<option value="0" data-foo="bar">option one</option>
|
<option value="0" data-foo="bar">option one</option>
|
||||||
...
|
...
|
||||||
</select>
|
</select>
|
||||||
</pre>
|
</pre>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
function format(state) {
|
function format(state) {
|
||||||
var originalOption = state.element;
|
var originalOption = state.element;
|
||||||
|
|
||||||
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' />" + state.text;
|
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' />" + state.text;
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="data">
|
<article class="row" id="data">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Loading Data</h3>
|
<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>
|
<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 class="prettyprint linenums" id="code_e5">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
<script id="script_e19">
|
<script id="script_e19">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e19").select2({ maximumSelectionSize: 3 });
|
$("#e19").select2({ maximumSelectionSize: 3 });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<article class="row" id="maximumSelectionSize">
|
<article class="row" id="maximumSelectionSize">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Maximum Selection Size</h3>
|
<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.
|
<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 class="prettyprint linenums" id="code_e19">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="data_array">
|
<article class="row" id="data_array">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Loading Array Data</h3>
|
<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>
|
<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 class="prettyprint linenums" id="code_e10">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="ajax">
|
<article class="row" id="ajax">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h3>Loading Remote Data</h3>
|
<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>
|
<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>
|
<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>
|
<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>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="row" id="infinite">
|
<article class="row" id="infinite">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h3>Infinite Scroll with Remote Data</h3>
|
<h3>Infinite Scroll with Remote Data</h3>
|
||||||
<p>Select2 supports lazy-appending of results when the result list is scrolled to the end.
|
<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>
|
<h3>Example Code</h3>
|
||||||
<pre class="prettyprint linenums" id="code_e7"></pre>
|
<pre class="prettyprint linenums" id="code_e7"></pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="programmatic">
|
<article class="row" id="programmatic">
|
||||||
<script id="script_e8">
|
<script id="script_e8">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e8").select2();
|
$("#e8").select2();
|
||||||
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
|
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
|
||||||
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
|
$("#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_cl").click(function() { $("#e8_2").select2("val", ""); });
|
||||||
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
|
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
|
||||||
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
|
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Programmatic Access</h3>
|
<h3>Programmatic Access</h3>
|
||||||
<p>Select2 supports methods that allow programmatic control of the component</p>
|
<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>
|
<h3>Example Code</h3>
|
||||||
<pre class="prettyprint linenums" id="code_e8"></pre>
|
<pre class="prettyprint linenums" id="code_e8"></pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="events">
|
<article class="row" id="events">
|
||||||
<script id="script_e11">
|
<script id="script_e11">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e11").select2({
|
$("#e11").select2({
|
||||||
placeholder: "Select report type",
|
placeholder: "Select report type",
|
||||||
allowClear: true,
|
allowClear: true,
|
||||||
@ -597,8 +608,8 @@ $("#e11")
|
|||||||
$("#e11_2")
|
$("#e11_2")
|
||||||
.on("change", function(e) { log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
|
.on("change", function(e) { log(JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })
|
||||||
.on("open", function() { log("open"); });
|
.on("open", function() { log("open"); });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
|
|
||||||
@ -617,13 +628,13 @@ $("#e11_2")
|
|||||||
<pre class="prettyprint linenums" id="code_e11">
|
<pre class="prettyprint linenums" id="code_e11">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="row" id="tags">
|
<article class="row" id="tags">
|
||||||
<script id="script_e12">
|
<script id="script_e12">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e12").select2({tags:["red", "green", "blue"]});
|
$("#e12").select2({tags:["red", "green", "blue"]});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Tagging Support</h3>
|
<h3>Tagging Support</h3>
|
||||||
|
|
||||||
@ -638,16 +649,40 @@ $("#e12").select2({tags:["red", "green", "blue"]});
|
|||||||
<pre class="prettyprint linenums" id="code_e12">
|
<pre class="prettyprint linenums" id="code_e12">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</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">
|
<p>Select2 supports ability to add choices automatically as the user is typing into the search field.
|
||||||
<script id="script_e13">
|
This is especially convenient in the tagging usecase where the user can quickly enter a number of tags
|
||||||
$(document).ready(function () {
|
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").select2();
|
||||||
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
|
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
|
||||||
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
|
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Reacting to external value changes</h3>
|
<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 class="prettyprint linenums" id="code_e13">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="lifecycle">
|
<article class="row" id="lifecycle">
|
||||||
<script id="script_e14">
|
<script id="script_e14">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e14").val(["AL","AZ"]).select2();
|
$("#e14").val(["AL","AZ"]).select2();
|
||||||
$("#e14_init").click(function() { $("#e14").select2(); });
|
$("#e14_init").click(function() { $("#e14").select2(); });
|
||||||
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Select2 Lifecycle</h3>
|
<h3>Select2 Lifecycle</h3>
|
||||||
|
|
||||||
@ -690,11 +725,11 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
|||||||
<pre class="prettyprint linenums" id="code_e14">
|
<pre class="prettyprint linenums" id="code_e14">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="lifecycle">
|
<article class="row" id="lifecycle">
|
||||||
<script id="script_e15">
|
<script id="script_e15">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
|
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
|
||||||
$("#e15").on("change", function() { $("#e15_val").html($("#e15").val());});
|
$("#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"); },
|
start: function() { $("#e15").select2("onSortStart"); },
|
||||||
update: function() { $("#e15").select2("onSortEnd"); }
|
update: function() { $("#e15").select2("onSortEnd"); }
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<h3>Select2 Drag and Drop Sorting</h3>
|
<h3>Select2 Drag and Drop Sorting</h3>
|
||||||
<p>
|
<p>
|
||||||
@ -719,10 +754,10 @@ $("#e15").select2("container").find("ul.select2-choices").sortable({
|
|||||||
<pre class="prettyprint linenums" id="code_e15">
|
<pre class="prettyprint linenums" id="code_e15">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
||||||
<article class="row" id="disabled">
|
<article class="row" id="disabled">
|
||||||
<script id="script_e16">
|
<script id="script_e16">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e16").select2();
|
$("#e16").select2();
|
||||||
@ -742,9 +777,9 @@ $("#e16_disable").click(function() { $("#e16,#e16_2").select2("disable"); });
|
|||||||
<pre class="prettyprint linenums" id="code_e16">
|
<pre class="prettyprint linenums" id="code_e16">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="matcher">
|
<article class="row" id="matcher">
|
||||||
<script id="script_e17">
|
<script id="script_e17">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e17").select2({
|
$("#e17").select2({
|
||||||
@ -774,9 +809,9 @@ $("#e17_2").select2({
|
|||||||
<pre class="prettyprint linenums" id="code_e17">
|
<pre class="prettyprint linenums" id="code_e17">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="row" id="responsive">
|
<article class="row" id="responsive">
|
||||||
<script id="script_e18">
|
<script id="script_e18">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#e18,#e18_2").select2();
|
$("#e18,#e18_2").select2();
|
||||||
@ -794,31 +829,31 @@ $("#e18,#e18_2").select2();
|
|||||||
<pre class="prettyprint linenums" id="code_e18">
|
<pre class="prettyprint linenums" id="code_e18">
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</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 class="span12"><h2>Documentation</h2><hr/></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>Constructor</h3></div>
|
<div class="span12"><h3>Constructor</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Parameter</th><th>Type</th><th>Description</th>
|
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td>width</td><td>string</td><td>
|
<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:
|
Controls the <code>width</code> style attribute of the Select2 container div. The following values are supported:
|
||||||
<dl>
|
<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>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>resolve</dt><dd>First attempts to <u>copy</u> than falls back on <u>element</u></dd>
|
||||||
<dt>other values</dt><dd>if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim</dd>
|
<dt>other values</dt><dd>if the width attribute contains a function it will be avaluated, otherwise the value is used verbatim</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search</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>
|
<tr><td>minimumResultsForSearch</td><td>int</td><td>
|
||||||
<p>
|
<p>
|
||||||
The minimum number of results that must be initially (after opening the dropdown for the first time)
|
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
|
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.
|
is not very useful and wastes screen space.
|
||||||
</p>
|
</p>
|
||||||
<p class="alert alert-info">Only applies to single-value select boxes</p>
|
<p class="alert alert-info">Only applies to single-value select boxes</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td>maximumSelectionSize</td><td>int</td><td>
|
<tr><td>maximumSelectionSize</td><td>int</td><td>
|
||||||
<p>
|
<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.
|
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>
|
||||||
<p>Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated
|
<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>
|
by the <code>formatSelectionTooBig</code> function</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td>placeholder</td><td>string</td><td>
|
<tr><td>placeholder</td><td>string</td><td>
|
||||||
<p>Initial value that is selected if no other selection is made.</p>
|
<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>
|
<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.
|
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><option></option></code>)
|
is selected in non-multi-value select boxes an empty first <code>option</code> element must be provided (<code><option></option></code>)
|
||||||
for the placeholder to work.
|
for the placeholder to work.
|
||||||
</p>
|
</p>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>separator</td><td>string</td><td>
|
<tr><td>separator</td><td>string</td><td>
|
||||||
<p>
|
<p>
|
||||||
Separator character or string used to delimit ids in <code>value</code> attribute of the multi-valued selects.
|
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.
|
The default delimiter is the <code>,</code> character.
|
||||||
</p>
|
</p>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>allowClear</td>
|
<td>allowClear</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>
|
<td>
|
||||||
@ -885,8 +920,8 @@ $("#e18,#e18_2").select2();
|
|||||||
selected option.
|
selected option.
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>multiple</td>
|
<td>multiple</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>
|
<td>
|
||||||
@ -897,8 +932,8 @@ $("#e18,#e18_2").select2();
|
|||||||
<code>multiple</code> attribute will be used instead.
|
<code>multiple</code> attribute will be used instead.
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>closeOnSelect</td>
|
<td>closeOnSelect</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>
|
<td>
|
||||||
@ -910,8 +945,17 @@ $("#e18,#e18_2").select2();
|
|||||||
Only applies when configured in multi-select mode.
|
Only applies when configured in multi-select mode.
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td>id</td><td>function</td><td>
|
<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.
|
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>
|
<pre>id(object)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
@ -920,8 +964,8 @@ $("#e18,#e18_2").select2();
|
|||||||
<tr><td><returns></td><td>string</td><td>the id of the object</td></tr>
|
<tr><td><returns></td><td>string</td><td>the id of the object</td></tr>
|
||||||
</table>
|
</table>
|
||||||
The default implementation expects the object to have a <code>id</code> property that is returned.
|
The default implementation expects the object to have a <code>id</code> property that is returned.
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td id="doc-matcher">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.
|
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.
|
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>
|
<pre>matcher(term, text, option)</pre>
|
||||||
@ -936,8 +980,8 @@ $("#e18,#e18_2").select2();
|
|||||||
</table>
|
</table>
|
||||||
The default implementation is case insensitive and matches anywhere in ther term:
|
The default implementation is case insensitive and matches anywhere in ther term:
|
||||||
<code>function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }</code>
|
<code>function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }</code>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>formatSelection</td><td>function</td><td>
|
<tr><td>formatSelection</td><td>function</td><td>
|
||||||
Function used to render the current selection.
|
Function used to render the current selection.
|
||||||
<pre>formatSelection(object, container)</pre>
|
<pre>formatSelection(object, container)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
@ -958,8 +1002,8 @@ $("#e18,#e18_2").select2();
|
|||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
</p>
|
</p>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>formatResult</td><td>function</td><td>
|
<tr><td>formatResult</td><td>function</td><td>
|
||||||
Function used to render a result that the user can select.
|
Function used to render a result that the user can select.
|
||||||
<pre>formatResult(object, container, query)</pre>
|
<pre>formatResult(object, container, query)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
@ -981,8 +1025,18 @@ $("#e18,#e18_2").select2();
|
|||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
</p>
|
</p>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>formatNoMatches</td><td>function</td><td>
|
<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><returns></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 "No matches" message
|
Function used to render the "No matches" message
|
||||||
<pre>formatNoMatches(term)</pre>
|
<pre>formatNoMatches(term)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<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>term</td><td>string</td><td>Search string entered by user</td></tr>
|
||||||
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
</table>
|
</table>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>formatInputTooShort</td><td>function</td><td>
|
<tr><td>formatSearching</td><td>function</td><td>
|
||||||
|
Function used to render the "Searching..." 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><returns></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 "Search input too short" message
|
Function used to render the "Search input too short" message
|
||||||
<pre>formatInputTooShort(term, minLength)</pre>
|
<pre>formatInputTooShort(term, minLength)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<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>minLength</td><td>int</td><td>Minimum required term length</td></tr>
|
||||||
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
</table>
|
</table>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>formatSelectionTooBig</td><td>function</td><td>
|
<tr><td>formatSelectionTooBig</td><td>function</td><td>
|
||||||
Function used to render the "You cannot select any more choices" message
|
Function used to render the "You cannot select any more choices" message
|
||||||
<pre>formatSelectionTooBig(maxSize)</pre>
|
<pre>formatSelectionTooBig(maxSize)</pre>
|
||||||
<table class="table table-bordered table-striped">
|
<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>maxSize</td><td>string</td><td>The maximum specified size of the selection</td></tr>
|
||||||
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
</table>
|
</table>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>createSearchChoice</td><td>function</td><td>
|
<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
|
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.
|
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
|
||||||
<pre>createSearchChoice(term)</pre>
|
<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
|
<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
|
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>
|
<code>,</code> as it is used as a value separator</p>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>initSelection</td><td>function</td><td>
|
<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
|
Called when Select2 is created to allow the user to initialize the selection based on the value of the
|
||||||
element select2 is attached to.
|
element select2 is attached to.
|
||||||
<p>
|
<p>
|
||||||
@ -1054,8 +1117,38 @@ $("#tags").select2({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
</pre>
|
</pre>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr id="doc-query">
|
<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><returns></td><td>string (optional)</td><td>Returns the string to which the input of
|
||||||
|
the search field should be set to. Usually this is the remainder, of any, of the string after
|
||||||
|
the tokens have been stripped. If <code>undefined</code> or <code>null</code> is returned the
|
||||||
|
input of the search field is unchanged.</code></td></tr>
|
||||||
|
</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>query</td>
|
||||||
<td>function</td>
|
<td>function</td>
|
||||||
<td>
|
<td>
|
||||||
@ -1107,8 +1200,8 @@ $("#tags").select2({
|
|||||||
</pre>
|
</pre>
|
||||||
</p>
|
</p>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr><td>ajax</td><td>object</td><td>
|
<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.
|
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">
|
<table class="table table-bordered table-striped">
|
||||||
@ -1142,38 +1235,38 @@ $("#tags").select2({
|
|||||||
</td></tr>
|
</td></tr>
|
||||||
</table>
|
</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 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>
|
</td></tr>
|
||||||
<tr><td>data</td><td>array/object</td><td>
|
<tr><td>data</td><td>array/object</td><td>
|
||||||
Options for the built in query function that works with arrays.
|
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>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>
|
<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>
|
</td></tr>
|
||||||
<tr><td>tags</td><td>array/function</td><td>
|
<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
|
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
|
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>
|
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
|
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>.
|
to the value of the <code>string</code>.
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>containerCss</td><td>function/object</td><td>
|
<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.
|
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>
|
</td></tr>
|
||||||
<tr><td>containerCssClass</td><td>function/string</td><td>
|
<tr><td>containerCssClass</td><td>function/string</td><td>
|
||||||
Css class that will be added to select2's container tag
|
Css class that will be added to select2's container tag
|
||||||
</td></tr>
|
</td></tr>
|
||||||
<tr><td>dropdownCss</td><td>function/object</td><td>
|
<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.
|
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>
|
</td></tr>
|
||||||
<tr><td>dropdownCssClass</td><td>function/string</td><td>
|
<tr><td>dropdownCssClass</td><td>function/string</td><td>
|
||||||
Css class that will be added to select2's dropdown container
|
Css class that will be added to select2's dropdown container
|
||||||
</td></tr>
|
</td></tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>val</h3></div>
|
<div class="span12"><h3>val</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Parameter</th><th>Type</th><th>Description</th>
|
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
@ -1196,63 +1289,63 @@ $("#tags").select2({
|
|||||||
|
|
||||||
</table>
|
</table>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
</table>
|
</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>
|
<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 class="span12"><h3>data</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Gets or sets the selection. Analogous to <code>val</code> method, but works with objects instead of ids.</p>
|
<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>
|
<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 class="span12"><h3>destroy</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
|
<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 class="span12"><h3>open</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Opens the dropdown</p>
|
<p>Opens the dropdown</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>close</h3></div>
|
<div class="span12"><h3>close</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Closes the dropdown</p>
|
<p>Closes the dropdown</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>disable</h3></div>
|
<div class="span12"><h3>disable</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Disables Select2. During this mode the user is not allowed to manipulate the selection.</p>
|
<p>Disables Select2. During this mode the user is not allowed to manipulate the selection.</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>enable</h3></div>
|
<div class="span12"><h3>enable</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Enables Select2.</p>
|
<p>Enables Select2.</p>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>container</h3></div>
|
<div class="span12"><h3>container</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Retrieves the main container element that wraps all of DOM added by Select2
|
<p>Retrieves the main container element that wraps all of DOM added by Select2
|
||||||
Example: <code>console.log($("#tags").select2("container"));</code></p>
|
Example: <code>console.log($("#tags").select2("container"));</code></p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>onSortStart</h3></div>
|
<div class="span12"><h3>onSortStart</h3></div>
|
||||||
</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.
|
<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>
|
Example: <code>$("#tags").select2("onSortStart");</code></p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h3>onSortEnd</h3></div>
|
<div class="span12"><h3>onSortEnd</h3></div>
|
||||||
</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.
|
<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>
|
Example: <code>$("#tags").select2("onSortEnd");</code>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12"><h2>Events</h2></div>
|
<div class="span12"><h2>Events</h2></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h3>change</h3>
|
<h3>change</h3>
|
||||||
<p>Fired when selection is changed.</p>
|
<p>Fired when selection is changed.</p>
|
||||||
@ -1265,25 +1358,25 @@ $("#tags").select2({
|
|||||||
</dl>
|
</dl>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row zebra">
|
<div class="row zebra">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h3>open</h3>
|
<h3>open</h3>
|
||||||
<p>Fired when the dropdown is shown.</p>
|
<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>The event listener can prevent the opening by calling <code>preventDefault()</code> on the supplied event object.</p>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h3>Configuring Defaults</h3>
|
<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
|
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>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there</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
511
select2-3.1/select2.css
Executable 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
2348
select2-3.1/select2.js
Executable file
File diff suppressed because it is too large
Load Diff
79
select2-3.1/select2.min.js
vendored
Normal file
79
select2-3.1/select2.min.js
vendored
Normal 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,"&"):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
BIN
select2-3.1/select2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
BIN
select2-3.1/spinner.gif
Executable file
BIN
select2-3.1/spinner.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -2,7 +2,7 @@
|
|||||||
layout: main
|
layout: main
|
||||||
title: Select2 Latest
|
title: Select2 Latest
|
||||||
group: navigation
|
group: navigation
|
||||||
version: 3.1
|
version: 3.2
|
||||||
---
|
---
|
||||||
|
|
||||||
<link href="select2-master/select2.css" rel="stylesheet"/>
|
<link href="select2-master/select2.css" rel="stylesheet"/>
|
||||||
@ -434,17 +434,17 @@ $("#e2_2").select2({
|
|||||||
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside temptlating functions:
|
You can set <code>data-</code> attributes to <code><option></code> (or <optgroup>) and use them inside temptlating functions:
|
||||||
</p>
|
</p>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<select>
|
<select>
|
||||||
<option value="0" data-foo="bar">option one</option>
|
<option value="0" data-foo="bar">option one</option>
|
||||||
...
|
...
|
||||||
</select>
|
</select>
|
||||||
</pre>
|
</pre>
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
function format(state) {
|
function format(state) {
|
||||||
var originalOption = state.element;
|
var originalOption = state.element;
|
||||||
|
|
||||||
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' />" + state.text;
|
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + originalOption.data('foo') + "' />" + state.text;
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
Subproject commit 816af4425b5dd867dd8378a96c107759054e5e49
|
Subproject commit 52907f2332620b4625774ec5d58ed91d605c8899
|
||||||
Loading…
Reference in New Issue
Block a user