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

catch up to master

Browse Source
This commit is contained in:
Igor Vaynberg 2012-06-12 20:19:51 -07:00
parent 436891f154
commit ae5de2b5e6
11 changed files with 3009 additions and 738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/main.html
View File

@ -94,7 +94,7 @@
<div class="container">
<div class="hero-unit">
<h1>Select2</h1>
<h1>Select2 {{ page.version }}</h1>
<p>Select2 is a jQuery based replacement for select boxes.
It supports searching, remote data sets, and infinite scrolling of results.
Look and feel of Select2 is based on the excellent

536
index.html
View File

@ -1,42 +1,43 @@
---
layout: main
title: Select2 2.0
title: Select2 2.1
group: navigation
version: 2.1
---
<link href="select2-2.0/select2.css" rel="stylesheet"/>
<script src="select2-2.0/select2.js"></script>
<link href="select2-2.1/select2.css" rel="stylesheet"/>
<script src="select2-2.1/select2.js"></script>
<script id="script_e1">
$(document).ready(function() {
$("#e1").select2();
});
$(document).ready(function() {
$("#e1").select2();
});
</script>
<script id="script_e3">
$(document).ready(function() {
$("#e3").select2({
$(document).ready(function() {
$("#e3").select2({
minimumInputLength: 2
});
});
});
});
</script>
<script id="script_e4">
$(document).ready(function() {
function format(state) {
$(document).ready(function() {
function format(state) {
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
$("#e4").select2({
}
$("#e4").select2({
formatResult: format,
formatSelection: format
});
});
});
});
</script>
<script id="script_e5">
$(document).ready(function() {
$("#e5").select2({
$(document).ready(function() {
$("#e5").select2({
minimumInputLength: 1,
query: function (query) {
var data = {results: []}, i, j, s;
@ -47,8 +48,8 @@ $("#e5").select2({
}
query.callback(data);
}
});
});
});
});
</script>
<script>
@ -76,8 +77,8 @@ $("#e5").select2({
</script>
<script id="script_e6">
$(document).ready(function() {
$("#e6").select2({
$(document).ready(function() {
$("#e6").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
@ -97,13 +98,13 @@ $("#e6").select2({
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
});
});
});
});
</script>
<script id="script_e7">
$(document).ready(function() {
$("#e7").select2({
$(document).ready(function() {
$("#e7").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 3,
ajax: {
@ -127,52 +128,41 @@ $("#e7").select2({
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
});
});
});
});
</script>
<script id="script_e9">
$(document).ready(function() {
$("#e9").select2();
});
$(document).ready(function() {
$("#e9").select2();
});
</script>
<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'}]
});
});
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
function format(item) { return item.tag; };
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
function format(item) { return item.tag; };
$("#e10_2").select2({
$("#e10_2").select2({
data:{ results: data, text: 'tag' },
formatSelection: format,
formatResult: format
});
});
$("#e10_3").select2({
$("#e10_3").select2({
data:{ results: data, text: function(item) { console.log('called with', item); return item.tag; } },
formatSelection: format,
formatResult: format
});
});
});
});
</script>
<div class="row">
<div class="span12">
<div class="alert alert-block alert-info">
For latest version see the <strong>Select2 Latest</strong> link in the top menu.
</div>
</div>
</div>
<header class="jumbotron subhead">
<div class="subnav">
<ul class="nav nav-pills">
@ -193,15 +183,26 @@ $("#e10_3").select2({
<li><a href="#programmatic">Programmatic control</a></li>
<li><a href="#event_change">Events: Change</a></li>
<li><a href="#event_ext_change">Events: Reacting to External Changes</a></li>
<li><a href="#disabled">Disabled Mode</a></li>
<li><a href="#matcher">Custom Matcher Function</a></li>
</ul>
</li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</header>
</header>
<section id="changelog">
<section id="changelog">
<h2>Changelog from 2.0</h2>
<div class="row"><div class="span12">
<ul>
<li>Added support for disabled mode. See <a href="#disabled">Disabled Mode</a> example</li>
<li>Added ability to provide custom matcher functions. See <a href="#matcher">Custom Matcher Function</a> example</li>
<li>Minimum required jQuery version bumped to 1.4.4</li>
</ul>
</div></div>
<h2>Changelog from 1.0</h2>
<div class="row"><div class="span12">
<ul>
@ -212,9 +213,9 @@ $("#e10_3").select2({
<li>Minimum required jQuery version changed from 1.7+ to 1.4.2</li>
</ul>
</div></div>
</section>
</section>
<section>
<section>
<h2>Browser Compatibility</h2>
<ul>
<li>IE 8+ (7 mostly works except for <a href="https://github.com/ivaynberg/select2/issues/37">issue with z-index</a>)</li>
@ -223,18 +224,18 @@ $("#e10_3").select2({
<li>Safari 3+</li>
<li>Opera 10.6+</li>
</ul>
</section>
</section>
<section>
<div class="row">
<section>
<div class="row">
<div class="span12">
<h2>Examples</h2>
<hr/>
</div>
</div>
</div>
<article class="row" id="basics">
<article class="row" id="basics">
<div class="span4">
<h3>The Basics</h3>
<p>Select2 can take a regular select box like this:</p>
@ -247,7 +248,7 @@ $("#e10_3").select2({
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums">
<pre class="prettyprint linenums" id="code_e1">
&lt;head&gt;
&lt;link href=&quot;select2.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;select2.js&quot;&gt;&lt;/script&gt;
@ -264,9 +265,9 @@ $("#e10_3").select2({
&lt;/body&gt;
</pre>
</div>
</article>
</article>
<article class="zebra row" id="multi">
<article class="zebra row" id="multi">
<div class="span4">
<h3>Multi-Value Select Boxes</h3>
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
@ -279,19 +280,19 @@ $("#e10_3").select2({
<pre class="prettyprint linenums" id="code_e9">
</pre>
</div>
</article>
</article>
<article class="row" id="placeholders">
<article class="row" id="placeholders">
<script id="script_e2">
$(document).ready(function() {
$("#e2").select2({
$("#e2").select2({
placeholder: "Select a State",
allowClear: true
});
$("#e2_2").select2({
});
$("#e2_2").select2({
placeholder: "Select a State"
});
});
});
</script>
<div class="span4">
@ -312,9 +313,9 @@ $("#e2_2").select2({
<pre class="prettyprint linenums" id="code_e2">
</pre>
</div>
</article>
</article>
<article class="zebra row" id="minimum">
<article class="zebra row" id="minimum">
<div class="span4">
<h3>Minimum Input</h3>
<p>Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:</p>
@ -326,9 +327,9 @@ $("#e2_2").select2({
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e3"></pre>
</div>
</article>
</article>
<article class="row" id="templating">
<article class="row" id="templating">
<div class="span4">
<h3>Templating</h3>
<p>Various display options of the Select2 component can be changed:</p>
@ -340,9 +341,9 @@ $("#e2_2").select2({
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e4"></pre>
</div>
</article>
</article>
<article class="zebra row" id="data">
<article class="zebra row" id="data">
<div class="span4">
<h3>Loading Data</h3>
<p>Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:</p>
@ -356,9 +357,9 @@ $("#e2_2").select2({
<pre class="prettyprint linenums" id="code_e5">
</pre>
</div>
</article>
</article>
<article class="row" id="data_array">
<article class="row" id="data_array">
<div class="span4">
<h3>Loading Array Data</h3>
<p>Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a <code>query</code> function mentioned in the example above.</p>
@ -380,9 +381,9 @@ $("#e2_2").select2({
<pre class="prettyprint linenums" id="code_e10">
</pre>
</div>
</article>
</article>
<article class="zebra row" id="ajax">
<article class="zebra row" id="ajax">
<div class="span12">
<h3>Loading Remote Data</h3>
<p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p>
@ -393,10 +394,9 @@ $("#e2_2").select2({
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e6"></pre>
<p>Select2 uses jQuery's <code>$.ajax</code> function to execute the remote call by default. An alternative <code>transport</code> function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom <code>query</code> function instead of using the <code>ajax</code> helper</p>
</div>
</article>
<article class="row" id="infinite">
</article>
<article class="row" id="infinite">
<div class="span12">
<h3>Infinite Scroll with Remote Data</h3>
<p>Select2 supports lazy-appending of results when the result list is scrolled to the end.
@ -411,26 +411,26 @@ $("#e2_2").select2({
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e7"></pre>
</div>
</article>
</article>
<article class="zebra row" id="programmatic">
<script id="script_e8">
$(document).ready(function() {
$("#e8").select2();
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
$("#e8_open").click(function () { $("#e8").select2("open"); });
$("#e8_close").click(function () { $("#e8").select2("close"); });
$("#e8_2").select2();
$("#e8_2_get").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});
$("#e8_2_set").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
});
</script>
<article class="zebra row" id="programmatic">
<script id="script_e8">
$(document).ready(function() {
$("#e8").select2();
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
$("#e8_open").click(function () { $("#e8").select2("open"); });
$("#e8_close").click(function () { $("#e8").select2("close"); });
$("#e8_2").select2();
$("#e8_2_get").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});
$("#e8_2_set").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
});
</script>
<div class="span4">
<h3>Programmatic Access</h3>
<p>Select2 supports methods that allow programmatic control of the componentL</p>
<p>Select2 supports methods that allow programmatic control of the component</p>
<p>
<input type="button" class="btn-primary" id="e8_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_set" value="Set to California"/>
@ -454,30 +454,30 @@ $("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e8"></pre>
</div>
</article>
</article>
<article class="row" id="event_change">
<script id="script_e11">
$(document).ready(function () {
$("#e11").select2({
<article class="row" id="event_change">
<script id="script_e11">
$(document).ready(function () {
$("#e11").select2({
placeholder: "Select report type",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
$("#e11_2").select2({
});
$("#e11_2").select2({
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function show() {
});
function show() {
var e=$("<div style='background-color:yellow;'>change fired</div>");
$("#events_11").append(e);
e.animate({opacity:0}, 1000, 'linear', function() { e.remove(); });
};
$("#e11").bind("change", show);
$("#e11_2").bind("change", show);
});
</script>
};
$("#e11").bind("change", show);
$("#e11_2").bind("change", show);
});
</script>
<div class="span4">
<h3>Change Event</h3>
@ -495,13 +495,13 @@ $("#e11_2").bind("change", show);
<pre class="prettyprint linenums" id="code_e11">
</pre>
</div>
</article>
<article class="row zebra" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
</script>
</article>
<article class="row zebra" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
</script>
<div class="span4">
<h3>Tagging Support</h3>
@ -516,16 +516,16 @@ $("#e12").select2({tags:["red", "green", "blue"]});
<pre class="prettyprint linenums" id="code_e12">
</pre>
</div>
</article>
</article>
<article class="row" id="event_ext_change">
<script id="script_e13">
$(document).ready(function () {
$("#e13").select2();
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
});
</script>
<article class="row" id="event_ext_change">
<script id="script_e13">
$(document).ready(function () {
$("#e13").select2();
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
});
</script>
<div class="span4">
<h3>Reacting to external value changes</h3>
@ -544,16 +544,16 @@ $("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change");
<pre class="prettyprint linenums" id="code_e13">
</pre>
</div>
</article>
</article>
<article class="row zebra" id="lifecycle">
<script id="script_e14">
$(document).ready(function () {
$("#e14").select2();
$("#e14_init").click(function() { $("#e14").select2(); });
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
});
</script>
<article class="row zebra" id="lifecycle">
<script id="script_e14">
$(document).ready(function () {
$("#e14").select2();
$("#e14_init").click(function() { $("#e14").select2(); });
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
});
</script>
<div class="span4">
<h3>Select2 Lifecycle</h3>
@ -568,32 +568,104 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<pre class="prettyprint linenums" id="code_e14">
</pre>
</div>
</article>
</article>
<article class="row" id="lifecycle">
<script id="script_e15">
$(document).ready(function () {
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
$("#e15").on("change", function() { $("#e15_val").html($("#e15").val());});
$("#e15").select2("container").find("ul.select2-choices").sortable({
containment: 'parent',
start: function() { $("#e15").select2("onSortStart"); },
update: function() { $("#e15").select2("onSortEnd"); }
});
});
</script>
<div class="span4">
<h3>Select2 Drag and Drop Sorting</h3>
<p>
Select2 supports drag and drop sorting of selected choices. Select2 does not, itself, provide the necessary code to perform dragging and dropping, instead it provides hooks that other libraries can use to provide the behavior. In this example we are using JQuery UI's <code>sortable()</code> plugin.
</p>
<p class="alert alert-info">The sorting is only available when Select2 is attached to a hidden <code>input</code> field.</p>
<p><input type="hidden" id="e15" style="width:300px;" value="red,green,blue,orange,white,black"/></p>
<p><div id="e15_val"></div></p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e15">
</pre>
</div>
</article>
</section>
<article class="row zebra" id="disabled">
<script id="script_e16">
$(document).ready(function () {
$("#e16").select2();
$("#e16_2").select2();
$("#e16_enable").click(function() { $("#e16,#e16_2").select2("enable"); });
$("#e16_disable").click(function() { $("#e16,#e16_2").select2("disable"); });
});
</script>
<div class="span4">
<h3>Select2 Disabled Mode</h3>
<p><select disabled="disabled" id="e16" style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
<p><select disabled="disabled" id="e16_2" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
<p><input type="button" id="e16_enable" class="btn btn-primary" value="Enable"/> <input type="button" id="e16_disable" class="btn btn-warning"value="Disable"/></p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e16">
</pre>
</div>
</article>
<article class="row" id="matcher">
<script id="script_e17">
$(document).ready(function () {
$("#e17").select2({
matcher: function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())==0; }
});
});
</script>
<div class="span4">
<h3>Custom Matcher</h3>
<p>Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere</p>
<p><select id="e17" style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e17">
</pre>
</div>
</article>
<!-- -->
<!-- DOCUMENTATION -->
<!-- -->
</section>
<section id="documentation">
<!-- -->
<!-- DOCUMENTATION -->
<!-- -->
<div class="row" style="padding-top: 20px;">
<section id="documentation">
<div class="row" style="padding-top: 20px;">
<div class="span12"><h2>Documentation</h2><hr/></div>
</div>
</div>
<div class="row">
<div class="row">
<div class="span12"><h3>Constructor</h3></div>
</div>
<table class="table table-bordered table-striped">
<tr>
</div>
<table class="table table-bordered table-striped">
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
<tr><td>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>
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search</td></tr>
<tr><td>minimumResultsForSearch</td><td>int</td><td>
<p>
The minimum number of results that must be initially (after opening the dropdown for the first time)
populated in order to keep the search field. This
@ -601,9 +673,9 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
is not very useful and wastes screen space.
</p>
<p class="alert alert-info">Only applies to single-value select boxes</p>
</td>
</tr>
<tr><td>placeholder</td><td>object/string</td><td>
</td>
</tr>
<tr><td>placeholder</td><td>object/string</td><td>
<p>Initial value that is selected if no other selection is made.</p>
<p>
The value can be specified either as an <code>object</code> or as a <code>string</code>. If
@ -622,8 +694,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
</p>
<p class="alert alert-warning">When Select2 is used in multi-select mode the placeholder must be a string.</p>
</td></tr>
<tr>
</td></tr>
<tr>
<td>allowClear</td>
<td>boolean</td>
<td>
@ -634,15 +706,17 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
only
available when the placeholder is specified.
</p>
<p class="alert alert-warning">When attached to a <code>select</code> an <code>option</code> with an empty value must be provided.
This is the option that will be selected when the button is pressed since a select box requires
at least one selection <code>option</code>.</p>
<p>
Also, note that this option only works with
non-multi-value based selects because multi-value selects always provide such a button for every
selected option.
</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td>multiple</td>
<td>boolean</td>
<td>
@ -653,8 +727,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<code>multiple</code> attribute will be used instead.
</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td>closeOnSelect</td>
<td>boolean</td>
<td>
@ -666,8 +740,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
Only applies when configured in multi-select mode.
</p>
</td>
</tr>
<tr><td>id</td><td>function</td><td>
</tr>
<tr><td>id</td><td>function</td><td>
Function used to get the id from the choice object or a string representing the key under which the id is stored.
<pre>id(object)</pre>
<table class="table table-bordered table-striped">
@ -676,8 +750,21 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<tr><td>&lt;returns&gt;</td><td>string</td><td>the id of the object</td></tr>
</table>
The default implementation expects the object to have a <code>id</code> property that is returned.
</td></tr>
<tr><td>formatSelection</td><td>function</td><td>
</td></tr>
<tr><td>matcher</td><td>function</td><td>
Used to determine whether or not the search term matches an option when a built-in query function is used.
The built in query function is used when Select2 is attached to a <code>select</code>, or the <code>local</code> or <code>tags</code> helpers are used.
<pre>matcher(term, text)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>term</td><td>string</td><td>search term</td></tr>
<tr><td>text</td><td>string</td><td>text of the option being matched</td></tr>
<tr><td>&lt;returns&gt;</td><td>boolean</td><td><code>true</code> if search term matches the option text, or <code>false</code> otherwise</td></tr>
</table>
The default implementation is case insensitive and matches anywhere in ther term:
<code>function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>0; }</code>
</td></tr>
<tr><td>formatSelection</td><td>function</td><td>
Function used to render the current selection.
<pre>formatSelection(object)</pre>
<table class="table table-bordered table-striped">
@ -686,8 +773,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
</table>
The default implementation expects the object to have a <code>text</code> property that is returned.
</td></tr>
<tr><td>formatResult</td><td>function</td><td>
</td></tr>
<tr><td>formatResult</td><td>function</td><td>
Function used to render a result that the user can select.
<pre>formatResult(object)</pre>
<table class="table table-bordered table-striped">
@ -696,8 +783,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the result</td></tr>
</table>
The default implementation expects the object to have a <code>text</code> property that is returned.
</td></tr>
<tr><td>formatNoMatches</td><td>function</td><td>
</td></tr>
<tr><td>formatNoMatches</td><td>function</td><td>
Function used to render the &quot;No matches&quot; message
<pre>formatNoMatches(term)</pre>
<table class="table table-bordered table-striped">
@ -705,8 +792,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<tr><td>term</td><td>string</td><td>Search string entered by user</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>formatInputTooShort</td><td>function</td><td>
</td></tr>
<tr><td>formatInputTooShort</td><td>function</td><td>
Function used to render the &quot;Search input too short&quot; message
<pre>formatInputTooShort(term, minLength)</pre>
<table class="table table-bordered table-striped">
@ -715,8 +802,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<tr><td>minLength</td><td>int</td><td>Minimum required term length</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Message html</td></tr>
</table>
</td></tr>
<tr><td>createSearchChoice</td><td>function</td><td>
</td></tr>
<tr><td>createSearchChoice</td><td>function</td><td>
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
<pre>createSearchChoice(term)</pre>
@ -733,8 +820,8 @@ $("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
<p class="alert alert-warning">When used in combination with <code>input[type=hidden]</code> tag care
must be taken to sanitize the <code>id</code> attribute of the choice object, especially stripping
<code>,</code> as it is used as a value separator</p>
</td></tr>
<tr><td>initSelection</td><td>function</td><td>
</td></tr>
<tr><td>initSelection</td><td>function</td><td>
Called when Select2 is created to allow the user to initialize the selection based on the value of the
element select2 is attached to.
<p>
@ -761,8 +848,8 @@ $("#tags").select2({
}
});
</pre>
</td></tr>
<tr>
</td></tr>
<tr id="doc-query">
<td>query</td>
<td>function</td>
<td>
@ -772,19 +859,21 @@ $("#tags").select2({
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>options.term</td><td>string</td><td>Search string entered by user</td></tr>
<tr><td>options.page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
<tr><td>options.callback</td><td>function</td>
<tr><td>options.context</td><td>object</td><td>An object that persists across the lifecycle of queries for the same search term (the query to retrieve the initial results, and subsequent queries to retrieve more result pages for the same search term). When this function is first called for a new search term this object will be null. The user may choose to set any object in the <code>results.context</code> field - this object will then be used as the context parameter for all calls to the <code>query</code> method that will load more search results for the initial search term. The object will be reset back to null when a new search term is queried. This feature is useful when a page number is not easily mapped against the server side paging mechanism. For example, some server side paging mechanism may return a &quot;continuation token&quot; that needs to be passed back to them in order to retrieve the next page of search results.</td></tr>
<tr id="doc-query-options-callback"><td>options.callback</td><td>function</td>
<td>Callback function that should be called with the <code>result</code> object. The result object:
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used.</td></tr>
<tr><td>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term</td></tr>
<tr><td>results.context</td><td>object</td><td>A user-defined object that should be made available as the <code>context</code> parameter to the <code>query</code> function on subsequent queries to load more result pages for the same search term. See the description of <a href="#doc-query-options-context">options.context</code></a> parameter.</td></tr>
</table>
</td></tr>
</table>
<p class="alert alert-warning">In order for this function to work Select2 should be attached to a <code>input type='hidden'</code> tag instead of a <code>select</code>.</p>
</td>
</tr>
<tr><td>ajax</td><td>object</td><td>
</tr>
<tr><td>ajax</td><td>object</td><td>
Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
<table class="table table-bordered table-striped">
@ -792,7 +881,7 @@ $("#tags").select2({
<tr><td>transport</td><td>function</td><td>Function that will be used to perform the ajax request. Must be parameter-compatible with <code>$.ajax</code>. Defaults to <code>$.ajax</code> if not specified.
Allows the use of various ajax wrapper libraries such as: <a href="http://www.protofunc.com/scripts/jquery/ajaxManager/">AjaxManager</a>. </td></tr>
<tr><td>url</td><td>string</td><td>Ajax url</td></tr>
<tr><td>dataType</td><td>stringt</td><td>Data type for the request. <code>ajax</code>, <code>jsonp</code>, other formats supported by jquery</td></tr>
<tr><td>dataType</td><td>string</td><td>Data type for the request. <code>ajax</code>, <code>jsonp</code>, other formats supported by jquery</td></tr>
<tr><td>quietMillis</td><td>int</td><td>Number of milliseconds to wait for the user to stop typing before issuing the ajax request</td></tr>
<tr><td>data</td><td>function</td><td>
Function to generate query parameters for the ajax request.
@ -801,6 +890,7 @@ $("#tags").select2({
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>term</td><td>string</td><td>Search term</td></tr>
<tr><td>page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
<tr><td>context</td><td>object</td><td>See <a href="#doc-query-options-callback"><code>options.context</code></a> parameter to the <a href="#doc-query"><code>query</code></a> function above.</td></tr>
<tr><td>&lt;returns&gt;</td><td>object</td><td>Object containing url paramters</td></tr>
</table>
</td></tr>
@ -811,31 +901,32 @@ $("#tags").select2({
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>data</td><td>object</td><td>Retrieved data</td></tr>
<tr><td>page</td><td>int</td><td>Page number that was passed into the <code>data</code> function above</td></tr>
<tr><td>context</td><td>object</td><td>See <a href="#doc-query-options-callback"><code>options.context</code></a> parameter to the <a href="#doc-query"><code>query</code></a> function above.</td></tr>
<tr><td>&lt;returns&gt;</td><td>object</td><td>Results object. See &quot;options.callback&quot; in the &quot;query&quot; function for format.</td></tr>
</table>
</td></tr>
</table>
<p class="alert alert-warning">In order for this function to work Select2 should be attached to a <code>input type='hidden'</code> tag instead of a <code>select</code>.</p>
</td></tr>
<tr><td>data</td><td>array/object</td><td>
</td></tr>
<tr><td>data</td><td>array/object</td><td>
Options for the built in query function that works with arrays.
<p>If this element contains an array, each element in the array must contain <code>id</code> and <code>text</code> keys</p>
<p>Alternatively, this element can be specified as an object in which <code>results</code> key must contain the data as an array and a <code>text</code> key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array</p>
</td></tr>
<tr><td>tags</td><td>array/function</td><td>
</td></tr>
<tr><td>tags</td><td>array/function</td><td>
Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
this options attribute which is either an <code>array</code> or a <code>function</code> that returns an
array of <code>objects</code> or <code>strings</code>. If <code>strings</code> are used instead of <code>objects</code>
they will be converted into an object that has an <code>id</code> and <code>text</code> attribute equal
to the value of the <code>string</code>.
</td></tr>
</table>
</td></tr>
</table>
<div class="row">
<div class="row">
<div class="span12"><h3>val</h3></div>
</div>
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
<table class="table table-bordered table-striped">
</div>
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
<table class="table table-bordered table-striped">
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
@ -860,35 +951,60 @@ $("#tags").select2({
</td></tr>
</table>
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
</table>
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>destroy</h3></div>
</div>
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
</div>
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
<div class="row">
<div class="row">
<div class="span12"><h3>open</h3></div>
</div>
<p>Opens the dropdown</p>
<div class="row">
</div>
<p>Opens the dropdown</p>
<div class="row">
<div class="span12"><h3>close</h3></div>
</div>
<p>Closes the dropdown</p>
</div>
<p>Closes the dropdown</p>
<div class="row">
<div class="span12"><h3>disable</h3></div>
</div>
<p>Disables Select2. During this mode the user is not allowed to manipulate the selection.</p>
<div class="row">
<div class="span12"><h3>enable</h3></div>
</div>
<p>Enables Select2.</p>
<div class="row">
<div class="span12"><h3>container</h3></div>
</div>
<p>Retrieves the main container element that wraps all of DOM added by Select2
Example: <code>console.log($("#tags").select2("container"));</code></p>
<div class="row">
<div class="span12"><h3>onSortStart</h3></div>
</div>
<p>Notifies Select2 that a drag and drop sorting operation has started. Select2 will hide all non-selection list items such as the search container, etc.
Example: <code>$("#tags").select2("onSortStart");</code></p>
<div class="row">
<div class="span12"><h3>onSortEnd</h3></div>
</div>
<p>Notifies Select2 that a drag and drop sorting operation has finished. Select2 will re-display any elements previously hidden and update the selection of the element it is attached to.
Example: <code>$("#tags").select2("onSortEnd");</code>
</p>
<div class="row">
<div class="row">
<div class="span12"><h2>Events</h2></div>
</div>
</div>
<div class="row">
<div class="row">
<div class="span12">
<h3>change</h3>
<p>Fired when selection is changed.</p>
<p class="alert alert-info">This event is not fired when the selection is changed using Select2's <code>val()</code> method.</p>
</div>
</div>
</div>
</section>
</section>

1
select2-1.0.html
View File

@ -2,6 +2,7 @@
layout: main
title: Select2 1.0
group: navigation
version: 1.0
---
<link href="select2-1.0/select2.css" rel="stylesheet"/>
<script src="select2-1.0/select2-1.0.js"></script>

60
select2-2.1/README.md Executable file
View File

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

456
select2-2.1/select2.css Executable file
View File

@ -0,0 +1,456 @@
/*
Version: 2.1 Timestamp: Tue Jun 12 19:50:25 PDT 2012
*/
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
}
.select2-container,
.select2-drop,
.select2-search,
.select2-container .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-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-container .select2-drop {
background: #fff;
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: 999;
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-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-container .select2-search {
display: inline-block;
white-space: nowrap;
z-index: 1010;
min-height: 26px;
width: 100%;
margin: 0;
padding-left: 4px;
padding-right: 4px;
}
.select2-container .select2-search-hidden {
display: block;
position: absolute;
left: -10000px;
}
.select2-container .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-container .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-container .select2-results {
margin: 4px 4px 4px 0;
padding: 0 0 0 4px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
max-height: 200px;
}
.select2-container .select2-results li {
line-height: 80%;
padding: 7px 7px 8px;
margin: 0;
list-style: none;
cursor: pointer;
display: list-item;
}
.select2-container .select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
.select2-container .select2-results li em {
background: #feffde;
font-style: normal;
}
.select2-container .select2-results .select2-highlighted em {
background: transparent;
}
.select2-container .select2-results .select2-no-results {
background: #f4f4f4;
display: list-item;
}
/*
disabled look for already selected choices in the results dropdown
.select2-container .select2-results .select2-disabled.select2-highlighted {
color: #666;
background: #f4f4f4;
display: list-item;
cursor: default;
}
.select2-container .select2-results .select2-disabled {
background: #f4f4f4;
display: list-item;
cursor: default;
}
*/
.select2-container .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-drop {
margin-top:0;
}
.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-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;
}
.select2-container-multi .select2-results {
margin: -1px 0 0;
padding: 0;
}
/* 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 */

1579
select2-2.1/select2.js Executable file
View File

File diff suppressed because it is too large Load Diff

58
select2-2.1/select2.min.js vendored Normal file
View File

@ -0,0 +1,58 @@
/*
Copyright 2012 Igor Vaynberg
Version: 2.1 Timestamp: Tue Jun 12 19:50:25 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,h){function i(a,b){var c=0,f=b.length,j;if("undefined"===typeof a)return-1;if(a.constructor===String)for(;c<f;c+=1){if(0===a.localeCompare(b[c]))return c}else for(;c<f;c+=1)if(j=b[c],j.constructor===String){if(0===j.localeCompare(a))return c}else if(j===a)return c;return-1}function n(a,b){return a===b?!0:a===h||b===h||null===a||null===b?!1:a.constructor===String?0===a.localeCompare(b):b.constructor===String?0===b.localeCompare(a):!1}function r(a,b){var c,f,j;if(null===a||1>a.length)return[];
c=a.split(b);f=0;for(j=c.length;f<j;f+=1)c[f]=e.trim(c[f]);return c}function w(a){a.bind("keydown",function(){a.data("keyup-change-value",a.val())});a.bind("keyup",function(){a.val()!==a.data("keyup-change-value")&&a.trigger("keyup-change")})}function x(a){a.bind("mousemove",function(a){var c=e(document).data("select2-lastpos");(c===h||c.x!==a.pageX||c.y!==a.pageY)&&e(a.target).trigger("mousemove-filtered",a)})}function s(a,b){var c;return function(){window.clearTimeout(c);c=window.setTimeout(b,a)}}
function y(a,b){var c=s(a,function(a){b.trigger("scroll-debounced",a)});b.bind("scroll",function(a){0<=i(a.target,b.get())&&c(a)})}function g(a){a.preventDefault();a.stopPropagation()}function t(a){var b,c=0,f=null,j=a.quietMillis||100;return function(d){window.clearTimeout(b);b=window.setTimeout(function(){var b=c+=1,j=a.data,h=a.transport||e.ajax,j=j.call(this,d.term,d.page,d.context);null!==f&&f.abort();f=h.call(null,{url:a.url,dataType:a.dataType,data:j,success:function(f){b<c||(f=a.results(f,
d.page),d.callback(f))}})},j)}}function u(a){var b=a,c=function(a){return""+a.text};e.isArray(b)||(c=b.text,e.isFunction(c)||(c=function(a){return a[b.text]}),b=b.results);return function(a){var j=a.term,d={};if(j==="")a.callback({results:b});else{d.results=e(b).filter(function(){return a.matcher(j,c(this))}).get();a.callback(d)}}}function v(a){return e.isFunction(a)?a:function(b){var c=b.term,f={results:[]};e(a).each(function(){var a=this.text!==h,e=a?this.text:this;if(""===c||b.matcher(c,e))f.results.push(a?
this:{id:this,text:this})});b.callback(f)}}function o(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===h){var d,m,p,q;d={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 d.LEFT:case d.RIGHT:case d.UP:case d.DOWN:return!0}return!1},isControl:function(a){a=
a.which?a.which:a;switch(a){case d.SHIFT:case d.CTRL:case d.ALT:return!0}return!1},isFunctionKey:function(a){a=a.which?a.which:a;return 112<=a&&123>=a}};e(document).delegate("*","mousemove",function(a){e(document).data("select2-lastpos",{x:a.pageX,y:a.pageY})});e(document).ready(function(){e(document).delegate("*","mousedown focusin touchend",function(a){var b=e(a.target).closest("div.select2-container").get(0);e(document).find("div.select2-container-active").each(function(){this!==b&&e(this).data("select2").blur()})})});
m=o(Object,{bind:function(a){var b=this;return function(){a.apply(b,arguments)}},init:function(a){var b,c;this.opts=a=this.prepareOpts(a);this.id=a.id;a.element.data("select2")!==h&&null!==a.element.data("select2")&&this.destroy();this.enabled=!0;this.container=this.createContainer();a.element.attr("class")!==h&&this.container.addClass(a.element.attr("class"));this.opts.element.data("select2",this).hide().after(this.container);this.container.data("select2",this);this.dropdown=this.container.find(".select2-drop");
this.results=b=this.container.find(".select2-results");this.search=c=this.container.find("input[type=text]");this.resultsPage=0;this.context=null;this.initContainer();x(this.results);this.container.delegate(".select2-results","mousemove-filtered",this.bind(this.highlightUnderEvent));y(80,this.results);this.container.delegate(".select2-results","scroll-debounced",this.bind(this.loadMoreIfNeeded));e.fn.mousewheel&&b.mousewheel(function(a,c,e,d){c=b.scrollTop();0<d&&0>=c-d?(b.scrollTop(0),g(a)):0>d&&
b.get(0).scrollHeight-b.scrollTop()+d<=b.height()&&(b.scrollTop(b.get(0).scrollHeight-b.height()),g(a))});w(c);c.bind("keyup-change",this.bind(this.updateResults));c.bind("focus",function(){c.addClass("select2-focused")});c.bind("blur",function(){c.removeClass("select2-focused")});this.container.delegate(".select2-results","click",this.bind(function(a){0<e(a.target).closest(".select2-result:not(.select2-disabled)").length?(this.highlightUnderEvent(a),this.selectHighlighted(a)):(g(a),this.focusSearch())}));
e.isFunction(this.opts.initSelection)&&(this.initSelection(),this.monitorSource());a.element.is(":disabled")&&this.disable()},destroy:function(){var a=this.opts.element.data("select2");a!==h&&(a.container.remove(),a.opts.element.removeData("select2").unbind(".select2").show())},prepareOpts:function(a){var b,c,f;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({},{formatResult:function(a){return a.text},formatSelection:function(a){return a.text},formatNoMatches:function(){return"No matches found"},formatInputTooShort:function(a,b){return"Please enter "+(b-a.length)+" more characters"},minimumResultsForSearch:0,minimumInputLength:0,id:function(a){return a.id},matcher:function(a,b){return b.toUpperCase().indexOf(a.toUpperCase())>=0}},a);"function"!==
typeof a.id&&(f=a.id,a.id=function(a){return a[f]});c?(a.query=this.bind(function(a){var c={results:[],more:false},f=a.term,d=this.getPlaceholder();b.find("option").each(function(b){var g=e(this),i=g.text();if(b===0&&d!==h&&i==="")return true;a.matcher(f,i)&&c.results.push({id:g.attr("value"),text:i})});a.callback(c)}),a.id=function(a){return a.id}):"query"in a||("ajax"in a?a.query=t(a.ajax):"data"in a?a.query=u(a.data):"tags"in a&&(a.query=v(a.tags),a.createSearchChoice=function(a){return{id:a,text:a}},
a.initSelection=function(a){var b=[];e(r(a.val(),",")).each(function(){b.push({id:this,text:this})});return b}));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(){this.opts.element.data("select2-change-triggered",!0);this.opts.element.trigger("change");
this.opts.element.data("select2-change-triggered",!1)},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")},open:function(){this.opened()||(this.container.addClass("select2-dropdown-open").addClass("select2-container-active"),this.updateResults(!0),this.dropdown.show(),
this.ensureHighlightVisible(),this.focusSearch())},close:function(){this.opened()&&(this.dropdown.hide(),this.container.removeClass("select2-dropdown-open"),this.results.empty(),this.clearSearch())},clearSearch:function(){},ensureHighlightVisible:function(){var a=this.results,b,c,f,d;b=a.children(".select2-result");c=this.highlight();0>c||(f=e(b[c]),d=f.offset().top+f.outerHeight(),c===b.length-1&&(b=a.find("li.select2-more-results"),0<b.length&&(d=b.offset().top+b.outerHeight())),b=a.offset().top+
a.outerHeight(),d>b&&a.scrollTop(a.scrollTop()+(d-b)),f=f.offset().top-a.offset().top,0>f&&a.scrollTop(a.scrollTop()+f))},moveHighlight:function(a){for(var b=this.results.children(".select2-result"),c=this.highlight();-1<c&&c<b.length;)if(c+=a,!e(b[c]).hasClass("select2-disabled")){this.highlight(c);break}},highlight:function(a){var b=this.results.children(".select2-result");if(0===arguments.length)return i(b.filter(".select2-highlighted")[0],b.get());b.removeClass("select2-highlighted");a>=b.length&&
(a=b.length-1);0>a&&(a=0);e(b[a]).addClass("select2-highlighted");this.ensureHighlightVisible();this.opened()&&this.focusSearch()},highlightUnderEvent:function(a){a=e(a.target).closest(".select2-result");0<a.length&&this.highlight(a.index())},loadMoreIfNeeded:function(){var a=this.results,b=a.find("li.select2-more-results"),c,f=-1,d=this.resultsPage+1;0!==b.length&&(c=b.offset().top-a.offset().top-a.height(),0>=c&&(b.addClass("select2-active"),this.opts.query({term:this.search.val(),page:d,context:this.context,
matcher:this.opts.matcher,callback:this.bind(function(c){var k=[],g=this;e(c.results).each(function(){k.push("<li class='select2-result'>");k.push(g.opts.formatResult(this));k.push("</li>")});b.before(k.join(""));a.find(".select2-result").each(function(a){var b=e(this);b.data("select2-data")!==h?f=a:b.data("select2-data",c.results[a-f-1])});c.more?b.removeClass("select2-active"):b.remove();this.resultsPage=d})})))},updateResults:function(a){function b(a){f.html(a);f.scrollTop(0);c.removeClass("select2-active")}
var c=this.search,f=this.results,d=this.opts,g=this;!0!==a&&!1===this.showSearchInput||(c.addClass("select2-active"),c.val().length<d.minimumInputLength?b("<li class='select2-no-results'>"+d.formatInputTooShort(c.val(),d.minimumInputLength)+"</li>"):(this.resultsPage=1,d.query({term:c.val(),page:this.resultsPage,context:null,matcher:d.matcher,callback:this.bind(function(k){var i=[],l;this.context=k.context===h?null:k.context;this.opts.createSearchChoice&&""!==c.val()&&(l=this.opts.createSearchChoice.call(null,
c.val(),k.results),l!==h&&null!==l&&g.id(l)!==h&&null!==g.id(l)&&0===e(k.results).filter(function(){return n(g.id(this),g.id(l))}).length&&k.results.unshift(l));0===k.results.length?b("<li class='select2-no-results'>"+d.formatNoMatches(c.val())+"</li>"):(e(k.results).each(function(){i.push("<li class='select2-result'>");i.push(d.formatResult(this));i.push("</li>")}),!0===k.more&&i.push("<li class='select2-more-results'>Loading more results...</li>"),b(i.join("")),f.children(".select2-result").each(function(a){a=
k.results[a];e(this).data("select2-data",a)}),this.postprocessResults(k,a))})})))},cancel:function(){this.close()},blur:function(){window.setTimeout(this.bind(function(){this.close();this.container.removeClass("select2-container-active");this.clearSearch();this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus");this.search.blur()}),10)},focusSearch:function(){window.setTimeout(this.bind(function(){this.search.focus()}),10)},selectHighlighted:function(){var a=
this.results.find(".select2-highlighted:not(.select2-disabled)").data("select2-data");if(a)this.onSelect(a)},getPlaceholder:function(){return this.opts.element.attr("placeholder")||this.opts.element.data("placeholder")||this.opts.placeholder},getContainerWidth:function(){var a,b,c,f;if(this.opts.width!==h)return this.opts.width;a=this.opts.element.attr("style");if(a!==h){a=a.split(";");c=0;for(f=a.length;c<f;c+=1)if(b=a[c].replace(/\s/g,"").match(/width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/),
null!==b&&1<=b.length)return b[1]}return this.opts.element.width()+"px"}});p=o(m,{createContainer:function(){return e("<div></div>",{"class":"select2-container",style:"width: "+this.getContainerWidth()}).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' style='display:none;'> <div class='select2-search'> <input type='text' autocomplete='off'/> </div> <ul class='select2-results'> </ul></div>")},
open:function(){this.opened()||this.parent.open.apply(this,arguments)},close:function(){this.opened()&&this.parent.close.apply(this,arguments)},focus:function(){this.close();this.selection.focus()},isFocused:function(){return this.selection.is(":focus")},cancel:function(){this.parent.cancel.apply(this,arguments);this.selection.focus()},initContainer:function(){var a,b=this.container,c=!1;this.selection=a=b.find(".select2-choice");this.search.bind("keydown",this.bind(function(a){switch(a.which){case d.UP:case d.DOWN:this.moveHighlight(a.which===
d.UP?-1:1);g(a);break;case d.TAB:case d.ENTER:this.selectHighlighted();g(a);break;case d.ESC:this.cancel(a),a.preventDefault()}}));b.delegate(".select2-choice","click",this.bind(function(b){c=!0;this.opened()?(this.close(),a.focus()):this.enabled&&this.open();b.preventDefault();c=!1}));b.delegate(".select2-choice","keydown",this.bind(function(a){if(this.enabled&&!(a.which===d.TAB||d.isControl(a)||d.isFunctionKey(a)||a.which===d.ESC))this.open(),(a.which===d.PAGE_UP||a.which===d.PAGE_DOWN||a.which===
d.SPACE)&&g(a),a.which===d.ENTER&&g(a)}));b.delegate(".select2-choice","focus",function(){this.enabled&&b.addClass("select2-container-active")});b.delegate(".select2-choice","blur",this.bind(function(){c||this.opened()||this.blur()}));a.delegate("abbr","click",this.bind(function(a){this.enabled&&(this.val(""),g(a),this.close(),this.triggerChange())}));this.setPlaceholder()},initSelection:function(){var a;""===this.opts.element.val()?this.updateSelection({id:"",text:""}):(a=this.opts.initSelection.call(null,
this.opts.element),a!==h&&null!==a&&this.updateSelection(a));this.close();this.setPlaceholder()},prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a){a=a.find(":selected");return{id:a.attr("value"),text:a.text()}});return a},setPlaceholder:function(){var a=this.getPlaceholder();""===this.opts.element.val()&&a!==h&&!(this.select&&""!==this.select.find("option:first").text())&&("object"===typeof a?
this.updateSelection(a):this.selection.find("span").html(a),this.selection.addClass("select2-default"),this.selection.find("abbr").hide())},postprocessResults:function(a,b){var c=0,f=this,d=!0;this.results.find(".select2-result").each(function(a){if(n(f.id(e(this).data("select2-data")),f.opts.element.val()))return c=a,!1});this.highlight(c);!0===b&&(d=this.showSearchInput=a.results.length>=this.opts.minimumResultsForSearch,this.container.find(".select2-search")[d?"removeClass":"addClass"]("select2-search-hidden"),
this.container[d?"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();n(b,this.id(a))||this.triggerChange()},updateSelection:function(a){this.selection.find("span").html(this.opts.formatSelection(a));this.selection.removeClass("select2-default");this.opts.allowClear&&this.getPlaceholder()!==h&&this.selection.find("abbr").show()},val:function(){var a,b=null;
if(0===arguments.length)return this.opts.element.val();a=arguments[0];this.select?(this.select.val(a).find(":selected").each(function(){b={id:e(this).attr("value"),text:e(this).text()};return!1}),this.updateSelection(b)):(this.opts.element.val(!a?"":this.id(a)),this.updateSelection(a));this.setPlaceholder()},clearSearch:function(){this.search.val("")}});q=o(m,{createContainer:function(){return e("<div></div>",{"class":"select2-container select2-container-multi",style:"width: "+this.getContainerWidth()}).html(" <ul class='select2-choices'> <li class='select2-search-field'> <input type='text' autocomplete='off' style='width: 25px;'> </li></ul><div class='select2-drop' style='display:none;'> <ul class='select2-results'> </ul></div>")},
prepareOpts:function(){var a=this.parent.prepareOpts.apply(this,arguments),a=e.extend({},{closeOnSelect:!0},a);"select"===a.element.get(0).tagName.toLowerCase()&&(a.initSelection=function(a){var c=[];a.find(":selected").each(function(){c.push({id:e(this).attr("value"),text:e(this).text()})});return c});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===
d.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);g(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 d.UP:case d.DOWN:this.moveHighlight(b.which===d.UP?-1:1);g(b);return;case d.ENTER:case d.TAB:this.selectHighlighted();
g(b);return;case d.ESC:this.cancel(b);b.preventDefault();return}b.which===d.TAB||(d.isControl(b)||d.isFunctionKey(b)||b.which===d.BACKSPACE||b.which===d.ESC)||(this.open(),(b.which===d.PAGE_UP||b.which===d.PAGE_DOWN)&&g(b))}}));this.search.bind("keyup",this.bind(this.resizeSearch));this.container.delegate(".select2-choices","click",this.bind(function(a){this.enabled&&(this.open(),this.focusSearch(),a.preventDefault())}));this.container.delegate(".select2-choices","focus",this.bind(function(){this.enabled&&
(this.container.addClass("select2-container-active"),this.clearPlaceholder())}));this.clearSearch()},enable:function(){this.enabled||(this.parent.enable.apply(this,arguments),this.search.show())},disable:function(){this.enabled&&(this.parent.disable.apply(this,arguments),this.search.hide())},initSelection:function(){var a;""===this.opts.element.val()&&this.updateSelection([]);if(this.select||""!==this.opts.element.val())a=this.opts.initSelection.call(null,this.opts.element),a!==h&&null!==a&&this.updateSelection(a);
this.close();this.clearSearch()},clearSearch:function(){var a=this.getPlaceholder();a!==h&&0===this.getVal().length&&!1===this.search.hasClass("select2-focused")?(this.search.val(a).addClass("select2-default"),this.search.width(this.getContainerWidth())):this.search.val("").width(10)},clearPlaceholder:function(){this.search.hasClass("select2-default")&&this.search.val("").removeClass("select2-default")},open:function(){this.opened()||(this.parent.open.apply(this,arguments),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>i(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()},onSelect:function(a){this.addSelectedChoice(a);this.select&&
this.postprocessResults();this.opts.closeOnSelect?(this.close(),this.search.width(10)):(this.search.width(10),this.resizeSearch());this.triggerChange();this.focusSearch()},cancel:function(){this.close();this.focusSearch()},addSelectedChoice:function(a){var b,c=this.id(a),d=this.getVal();b=["<li class='select2-search-choice'>",this.opts.formatSelection(a),"<a href='javascript:void(0)' class='select2-search-choice-close' tabindex='-1'></a>","</li>"];b=e(b.join(""));b.find("a").bind("click dblclick",
this.bind(function(a){this.enabled&&(this.unselect(e(a.target)),this.selection.find(".select2-search-choice-focus").removeClass("select2-search-choice-focus"),g(a),this.close(),this.focusSearch())})).bind("focus",this.bind(function(){this.enabled&&this.container.addClass("select2-container-active")}));b.data("select2-data",a);b.insertBefore(this.searchContainer);d.push(c);this.setVal(d)},unselect:function(a){var b=this.getVal(),c,a=a.closest(".select2-search-choice");if(0===a.length)throw"Invalid argument: "+
a+". Must be .select2-search-choice";c=i(this.id(a.data("select2-data")),b);0<=c&&(b.splice(c,1),this.setVal(b),this.select&&this.postprocessResults());a.remove();this.triggerChange()},postprocessResults:function(){var a=this.getVal(),b=this.results.find(".select2-result"),c=this;b.each(function(){var b=e(this),d=c.id(b.data("select2-data"));0<=i(d,a)?b.addClass("select2-disabled"):b.removeClass("select2-disabled")});b.each(function(a){if(!e(this).hasClass("select2-disabled"))return c.highlight(a),
!1})},resizeSearch:function(){var a,b,c,d;c=this.search;a=e("<div></div>").css({position:"absolute",left:"-1000px",top:"-1000px",display:"none",fontSize:c.css("fontSize"),fontFamily:c.css("fontFamily"),fontStyle:c.css("fontStyle"),fontWeight:c.css("fontWeight"),letterSpacing:c.css("letterSpacing"),textTransform:c.css("textTransform"),whiteSpace:"nowrap"});a.text(c.val());e("body").append(a);c=a.width();a.remove();a=c+10;b=this.search.offset().left;c=this.selection.width();d=this.selection.offset().left;
b=c-(b-d)-(this.search.outerWidth()-this.search.width());b<a&&(b=c-(this.search.outerWidth()-this.search.width()));40>b&&(b=c-(this.search.outerWidth()-this.search.width()));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 r(a,",")},setVal:function(a){var b;this.select?this.select.val(a):(b=[],e(a).each(function(){0>i(this,b)&&b.push(this)}),this.opts.element.val(0===b.length?"":b.join(",")))},val:function(){var a,
b=[],c=this;if(0===arguments.length)return this.getVal();a=arguments[0];this.select?(this.setVal(a),this.select.find(":selected").each(function(){b.push({id:e(this).attr("value"),text:e(this).text()})}),this.updateSelection(b)):(a=null===a?[]:a,this.setVal(a),e(a).each(function(){b.push(c.id(this))}),this.setVal(b),this.updateSelection(a));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()}});e.fn.select2=function(){var a=Array.prototype.slice.call(arguments,0),b,c,d,g,m="val destroy open close focus isFocused container onSortStart onSortEnd enable disable".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()?g=b.element.attr("multiple"):(g=b.multiple||!1,"tags"in b&&(b.multiple=g=!0)),c=g?new q:new p,c.init(b);else if("string"===typeof a[0]){if(0>i(a[0],m))throw"Unknown method: "+a[0];d=h;c=e(this).data("select2");if(c!==h&&(d="container"===a[0]?c.container:c[a[0]].apply(c,a.slice(1)),d!==h))return!1}else throw"Invalid arguments to select2 plugin: "+
a;});return d===h?this:d};window.Select2={query:{ajax:t,local:u,tags:v},util:{debounce:s},"class":{"abstract":m,single:p,multi:q}}}})(jQuery);

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
select2-latest.html
View File

@ -2,6 +2,7 @@
layout: main
title: Select2 Latest
group: navigation
version: 3.0
---
<link href="select2-master/select2.css" rel="stylesheet"/>
@ -166,7 +167,7 @@ $("#e10_3").select2({
<div class="span12">
<div class="alert alert-block alert-error">
<h4 class="alert-heading">Warning!</h4>
This page refers to an unreleased version of Select2 which may be unstable. For the latest stable
This page refers to an unreleased <em>{{ page.version }}</em> version of Select2 which may be unstable. For the latest stable
and previous versions please see links at the top. The code for this version is only available in the <a
href="https://github.com/ivaynberg/select2">master branch.</a>
</div>

2
select2-master

@ -1 +1 @@
Subproject commit cb2e131c502e76de79ee866ec8410372c20aa333
Subproject commit 5be165ffff15239f3af80a1c77d3de1cb78aabc4