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

updated for changes in master

Browse Source
This commit is contained in:
Igor Vaynberg 2012-03-25 23:19:41 -07:00
parent ad6ebdeea3
commit 56eb0ae10c
7 changed files with 2397 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

356
index.html
View File

@ -9,11 +9,10 @@
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="prettify/prettify.css" rel="stylesheet"/> <link href="prettify/prettify.css" rel="stylesheet"/>
<link href="select2-1.0/select2.css" rel="stylesheet"/> <link href="select2-master/select2.css" rel="stylesheet"/>
<style type="text/css"> <style type="text/css">
body { body {
padding-top: 60px; padding-top: 60px;
padding-bottom: 40px;
} }
.zebra { background-color: #efefef; } .zebra { background-color: #efefef; }
@ -37,9 +36,10 @@
<![endif]--> <![endif]-->
<script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="prettify/prettify.min.js"></script> <script src="prettify/prettify.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
<script src="select2-1.0/select2-1.0.js"></script> <script src="select2-master/select2.js"></script>
<script id="script_e1"> <script id="script_e1">
$(document).ready(function() { $(document).ready(function() {
@ -51,7 +51,8 @@ $("#e1").select2();
<script id="script_e2"> <script id="script_e2">
$(document).ready(function() { $(document).ready(function() {
$("#e2").select2({ $("#e2").select2({
placeholder: {id: "", text: "Select a State"} placeholder: "Select a State",
allowClear: true
}); });
}); });
</script> </script>
@ -94,27 +95,9 @@ $("#e5").select2({
}); });
</script> </script>
<script id="script_e6"> <script>
$(document).ready(function() {
$("#e6").select2({ function movieFormatResult(movie) {
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1,
query: "ajax",
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
data: function (term, vars) {
return params = {
q: term,
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please use your own so this example keeps working
};
},
results: function (data, vars) {
return {results: data.movies};
}
},
formatResult: function (movie) {
var markup = "<table class='movie-result'><tr>"; var markup = "<table class='movie-result'><tr>";
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) { if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>"; markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
@ -128,10 +111,36 @@ $("#e6").select2({
} }
markup += "</td></tr></table>" markup += "</td></tr></table>"
return markup; return markup;
}, }
formatSelection: function (movie) {
function movieFormatSelection(movie) {
return movie.title; return movie.title;
} }
</script>
<script id="script_e6">
$(document).ready(function() {
$("#e6").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 3,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
data: function (term, page) {
return {
q: term,
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
};
},
results: function (data, vars) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data.movies};
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
}); });
}); });
</script> </script>
@ -140,45 +149,28 @@ $("#e6").select2({
$(document).ready(function() { $(document).ready(function() {
$("#e7").select2({ $("#e7").select2({
placeholder: {title: "Search for a movie", id: ""}, placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1, minimumInputLength: 3,
query: "ajax",
ajax: { ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json", url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp', dataType: 'jsonp',
quietMillis: 100, quietMillis: 100,
data: function (term, vars) { // vars is an object that select2 holds onto for us as long as the search term stays the same data: function (term, page) { // page is the one-based page number tracked by Select2
var page = vars.page || 1; // figure out what page to query return {
return params = {
q: term, q: term,
page_limit: 10, page_limit: 10, // page size
page: page, page: page, // page number
apikey: "ju6z9mjyajq2djue3gbvv26t" // please use your own so this example keeps working apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
}; };
}, },
results: function (data, vars) { results: function (data, page) {
vars.page = vars.page ? vars.page + 1 : 2; // figure out what page to query next and save it var more = (page * 10) < data.total; // whether or not there are more results available
var more = (vars.page - 1) * 50 < data.total; // whether or not there are more results available
return {results: data.movies, more: more, vars: vars}; // notice we return the value of more so Select2 knows if more results can be loaded
return {results: data.movies, more: more};
} }
}, },
formatResult: function (movie) { formatResult: movieFormatResult, // omitted for brevity, see the source of this page
var markup = "<table class='movie-result'><tr>"; formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
}
markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
if (movie.critics_consensus !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
}
else if (movie.synopsis !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
}
markup += "</td></tr></table>"
return markup;
},
formatSelection: function (movie) {
return movie.title;
}
}); });
}); });
</script> </script>
@ -186,16 +178,17 @@ $("#e7").select2({
<script id="script_e8"> <script id="script_e8">
$(document).ready(function() { $(document).ready(function() {
$("#e8").select2(); $("#e8").select2();
$("#e8_get").click( $("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
function () { $("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
alert("Selected value is: "+$("#e8").select2("val")); $("#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_set").click(
function () { });
$("#e8").select2("val", "CA"); </script>
} <script id="script_e9">
); $(document).ready(function() {
$("#e9").select2();
}); });
</script> </script>
@ -220,6 +213,7 @@ $("#e8_set").click(
setupExampleCode("e6"); setupExampleCode("e6");
setupExampleCode("e7"); setupExampleCode("e7");
setupExampleCode("e8"); setupExampleCode("e8");
setupExampleCode("e9");
prettyPrint();}); prettyPrint();});
</script> </script>
@ -251,7 +245,8 @@ $("#e8_set").click(
</a> </a>
<div class="nav-collapse"> <div class="nav-collapse">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="index.html">Select2</a></li> <li class="active"><a href="index.html">Select2 Latest</a></li>
<li><a href="select2-1.0.html">Select2 1.0</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
@ -272,6 +267,43 @@ $("#e8_set").click(
</p> </p>
</div> </div>
<div class="row">
<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
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>
</div>
</div>
<header class="jumbotron subhead">
<div class="subnav">
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#basics">Basics</a></li>
<li><a href="#multi">Multi-Value</a></li>
<li><a href="#placeholders">Placeholders</a></li>
<li><a href="#minimum">Minimum Input Length</a></li>
<li><a href="#templating">Templating</a></li>
<li><a href="#data">Custom Data</a></li>
<li><a href="#ajax">Remote/AJAX Data</a></li>
<li><a href="#infinite">Infinite Scrolling of Remote/AJAX data</a></li>
<li><a href="#pragmatic">Pragmatic control</a></li>
</ul>
</li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</header>
<section>
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<h2>Examples</h2> <h2>Examples</h2>
@ -280,15 +312,16 @@ $("#e8_set").click(
</div> </div>
<div class="row"> <article class="row" id="basics">
<div class="span4"> <div class="span4">
<h3>The Basics</h3> <h3>The Basics</h3>
<p>Select2 takes a select box like this:</p> <p>Select2 can take a regular select box like this:</p>
<p><select style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></p> <p><select style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></p>
<p>and turns it into:</p> <p>and turns it into:</p>
<p> <p>
<select id="e1" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/> <select id="e1" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p> </p>
<p>with support for quick option filtering via a search box</p>
</div> </div>
<div class="span8"> <div class="span8">
<h3>Example Code</h3> <h3>Example Code</h3>
@ -309,67 +342,87 @@ $("#e8_set").click(
&lt;/body&gt; &lt;/body&gt;
</pre> </pre>
</div> </div>
</div> </article>
<div class="zebra row"> <article class="zebra row" id="multi">
<div class="span4">
<h3>Multi-Value Select Boxes</h3>
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
<p>
<select multiple name="e9" id="e9" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e9">
</pre>
</div>
</article>
<article class="row" id="placeholders">
<div class="span4"> <div class="span4">
<h3>Placeholders</h3> <h3>Placeholders</h3>
<p>A placeholder text can be defined that will be displayed until a selection is made:</p> <p>A placeholder value can be defined and will be displayed until a selection is made:</p>
<p> <p>
<select id="e2" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/> <select id="e2" style="width:300px"><option></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p> </p>
<p>The placeholder can be declared via a <code>data-placeholder</code> attribute attached to the <code>select</code>, or via the <code>placeholder</code> configuration element as seen in the example code</p>
<p>Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.</p>
</div> </div>
<div class="span8"> <div class="span8">
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e2"> <pre class="prettyprint linenums" id="code_e2">
</pre> </pre>
</div> </div>
</div> </article>
<div class="row"> <article class="zebra 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>
<p> <p>
<select id="e3" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/> <select id="e3" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p> </p>
</div> </div>
<div class="span8"> <div class="span8">
<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>
</div> </article>
<div class="zebra row"> <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>
<p> <p>
<select id="e4" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/> <select id="e4" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p> </p>
</div> </div>
<div class="span8"> <div class="span8">
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e4"></pre> <pre class="prettyprint linenums" id="code_e4"></pre>
</div> </div>
</div> </article>
<div class="row"> <article class="zebra 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 echoed 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>
<p> <p>
<input type="hidden" id="e5" style="width:300px"/> <input type="hidden" id="e5" style="width:300px"/>
</p> </p>
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</code></p>
</div> </div>
<div class="span8"> <div class="span8">
<h3>Example Code</h3> <h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e5"> <pre class="prettyprint linenums" id="code_e5">
</pre> </pre>
</div> </div>
</div> </article>
<div class="zebra row"> <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>
@ -378,9 +431,10 @@ $("#e8_set").click(
</p> </p>
<h3>Example Code</h3> <h3>Example Code</h3>
<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. If you would like to use another transport you can specify your own <code>query</code> function instead of using the <code>ajax</code> helper.</p>
</div> </div>
</div> </article>
<div class="row"> <article class="zebra 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.
@ -394,25 +448,35 @@ $("#e8_set").click(
<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>
</div> </article>
<div class="zebra row"> <article class="row" id="pragmatic">
<div class="span4"> <div class="span4">
<h3>Pragmatic Access</h3> <h3>Pragmatic Access</h3>
<p>Select2 supports methods that allow pragmatic control of the componentL</p> <p>Select2 supports methods that allow pragmatic control of the componentL</p>
<p> <p>
<select id="e8" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/> <select id="e8" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p> </p>
<p> <p>
<input type="button" class="btn-primary" id="e8_get" value="Alert selected value"/> <input type="button" class="btn-primary" id="e8_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_set" value="Set selected value to California"/> <input type="button" class="btn-info" id="e8_set" value="Set to California"/>
</p>
<p>
<select id="e8_2" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
</p>
<p>
<input type="button" class="btn-primary" id="e8_2_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_2_set" value="Set to California and Massachusetts"/>
</p> </p>
</div> </div>
<div class="span8"> <div class="span8">
<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>
</div> </article>
</section>
<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>
@ -426,9 +490,58 @@ $("#e8_set").click(
<th>Parameter</th><th>Type</th><th>Description</th> <th>Parameter</th><th>Type</th><th>Description</th>
</tr> </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>placeholder</td><td>object</td><td>Initial value that is selected if no other selection is made</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
specified as a <code>string</code> any custom <code>formatSelection</code> function will be
bypassed and the string value will be rendered directly.
</p>
<p>The placeholder can also be specified as a <code>data-placeholder</code> attribute on the <code>select</code>
or <code>input</code> element that Select2 is attached to. In this case only <code>string</code>
values are supported
</p>
<p class="alert alert-warning">Note that because browsers assume the first <code>option</code> element
is selected in
non-multi-value select boxes an empty first <code>option</code> element must be provided (<code>&lt;option&gt;&lt;/option&gt;</code>)
for the placeholder to work.
</p>
</td></tr>
<tr>
<td>allowClear</td>
<td>boolean</td>
<td>
<p>
Whether or not a clear button is displayed when the select box has a selection. The
button,
when clicked, resets the value of the select box back to the placeholder, thus this option is
only
available when the placeholder is specified.
</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>
<td>multiple</td>
<td>boolean</td>
<td>
<p>
Whether or not Select2 allows selection of multiple values.
</p>
<p>When Select2 is attached to a <code>select</code> element this value will be ignored and <code>select</code>'s
<code>multiple</code> attribute will be used instead.
</p>
</td>
</tr>
<tr><td>formatSelection</td><td>function</td><td> <tr><td>formatSelection</td><td>function</td><td>
Function used render the current selection. Function used to render the current selection.
<pre>formatSelection(object)</pre> <pre>formatSelection(object)</pre>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
@ -468,30 +581,27 @@ $("#e8_set").click(
</td></tr> </td></tr>
<tr> <tr>
<td>query</td> <td>query</td>
<td>function/string</td> <td>function</td>
<td> <td>
Function used to query results for the search term. Function used to query results for the search term.
<pre>query(options)</pre> <pre>query(options)</pre>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <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.term</td><td>string</td><td>Search string entered by user</td></tr>
<tr><td>options.vars</td><td>object</td><td>Object from the previous result, see <code>options.callback</code></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.callback</td><td>function</td>
<td>Callback function that should be called with the <code>result</code> object. The results object: <td>Callback function that should be called with the <code>result</code> object. The result object:
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used.</td></tr> <tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used.</td></tr>
<tr><td>result.vars</td><td>object</td><td>A user-defined object that will be passed into the next invocation of <code>query</code> if more results need to be loaded</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>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term</td></tr>
</table> </table>
</td></tr> </td></tr>
</table> </table>
<hr/>
<code>"ajax"</code> - use the built in ajax query function. This function will handle throttling and dropping out-of-order responses.
</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. 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">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
@ -500,21 +610,21 @@ $("#e8_set").click(
<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>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> <tr><td>data</td><td>function</td><td>
Function to generate query parameters for the ajax request. Function to generate query parameters for the ajax request.
<pre>data(term, vars)</pre> <pre>data(term, page)</pre>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <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>term</td><td>string</td><td>Search term</td></tr>
<tr><td>vars</td><td>object</td><td>The vars object from the previous search's result</td></tr> <tr><td>page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
<tr><td>&lt;returns&gt;</td><td>object</td><td>Object containing url paramters</td></tr> <tr><td>&lt;returns&gt;</td><td>object</td><td>Object containing url paramters</td></tr>
</table> </table>
</td></tr> </td></tr>
<tr><td>results</td><td>function</td><td> <tr><td>results</td><td>function</td><td>
Function used to build the query results object from the ajax response Function used to build the query results object from the ajax response
<pre>results(term, vars)</pre> <pre>results(term, page)</pre>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr> <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>term</td><td>string</td><td>Search term</td></tr>
<tr><td>vars</td><td>object</td><td>The vars object from the previous search's result</td></tr> <tr><td>page</td><td>int</td><td>Page number that was passed into the <code>data</code> 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> <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> </table>
</td></tr> </td></tr>
@ -530,10 +640,31 @@ $("#e8_set").click(
<tr> <tr>
<th>Parameter</th><th>Type</th><th>Description</th> <th>Parameter</th><th>Type</th><th>Description</th>
</tr> </tr>
<tr><td>value (optional)</td><td>object</td><td>Result object for the new selection, or the <code>id</code> attribute of a loaded result object</td></tr> <tr><td>value (optional)</td><td>object</td><td>
<table>
<tr>
<th></th><th>Single-Valued</th><th>Multi-Valued</th>
</tr>
<tr>
<th>Attached to <code>select</code></th>
<td>Value of the <code>value</code> attribute of the <code>option</code> that should be selected</td>
<td>Array of values specified to the left. <code>null</code> for empty.</td>
</tr>
<tr>
<th>Attached to <code>input[type=hidden]</code></th>
<td>An object representing the selection. Should at least contain an <code>id</code> key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional <code>text</code> key</td>
<td>Array of objects specified to the left. <code>null</code> for empty.</td>
</tr>
</table>
</td></tr>
</table> </table>
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre> Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
<!--
<div class="row"> <div class="row">
<div class="span12"><h2>Events</h2></div> <div class="span12"><h2>Events</h2></div>
</div> </div>
@ -554,10 +685,12 @@ $("#e8_set").click(
<div class="span12"><h3>selected</h3></div> <div class="span12"><h3>selected</h3></div>
</div> </div>
<p>Signals a selection has been made</p> <p>Signals a selection has been made</p>
-->
</section>
<section id="about">
<div class="row"> <div class="row">
<div class="span12"><h2>Community</h2></div> <div class="span12"><h2>About</h2></div>
</div> </div>
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
@ -570,10 +703,11 @@ $("#e8_set").click(
</div> </div>
</div> </div>
</section>
<hr/> <hr/>
<footer> <footer>
<p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a></p> <p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a>. Coded by Igor Vaynberg.</p>
</footer> </footer>

84
js/jquery.mousewheel.js Executable file
View File

@ -0,0 +1,84 @@
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.6
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);

585
select2-1.0.html Executable file
View File

@ -0,0 +1,585 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="prettify/prettify.css" rel="stylesheet"/>
<link href="select2-1.0/select2.css" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.zebra { background-color: #efefef; }
.select2-container img.flag { height: 10px; width: 15px; padding-right: 10px; }
.movie-result td {vertical-align: top }
.movie-image { width: 60px; }
.movie-image img { height: 80px; width: 60px; }
.movie-info { padding-left: 10px; vertical-align: top; }
.movie-title { font-size: 1.2em; padding-bottom: 15px; }
.movie-synopsis { font-size: .8em; color: #888; }
.select2-highlighted .movie-synopsis { font-size: .8em; color: #eee; }
.bigdrop .select2-results {max-height: 300px;}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="prettify/prettify.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="select2-1.0/select2-1.0.js"></script>
<script id="script_e1">
$(document).ready(function() {
$("#e1").select2();
});
</script>
<script id="script_e2">
$(document).ready(function() {
$("#e2").select2({
placeholder: {id: "", text: "Select a State"}
});
});
</script>
<script id="script_e3">
$(document).ready(function() {
$("#e3").select2({
minimumInputLength: 2
});
});
</script>
<script id="script_e4">
$(document).ready(function() {
function format(state) {
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
$("#e4").select2({
formatResult: format,
formatSelection: format
});
});
</script>
<script id="script_e5">
$(document).ready(function() {
$("#e5").select2({
minimumInputLength: 1,
query: function (query) {
var data = {results: []}, i, j, s;
for (i = 1; i < 5; i++) {
s = "";
for (j = 0; j < i; j++) {s = s + query.term;}
data.results.push({id: query.term + i, text: s});
}
query.callback(data);
}
});
});
</script>
<script id="script_e6">
$(document).ready(function() {
$("#e6").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1,
query: "ajax",
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
data: function (term, vars) {
return params = {
q: term,
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please use your own so this example keeps working
};
},
results: function (data, vars) {
return {results: data.movies};
}
},
formatResult: function (movie) {
var markup = "<table class='movie-result'><tr>";
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
}
markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
if (movie.critics_consensus !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
}
else if (movie.synopsis !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
}
markup += "</td></tr></table>"
return markup;
},
formatSelection: function (movie) {
return movie.title;
}
});
});
</script>
<script id="script_e7">
$(document).ready(function() {
$("#e7").select2({
placeholder: {title: "Search for a movie", id: ""},
minimumInputLength: 1,
query: "ajax",
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 100,
data: function (term, vars) { // vars is an object that select2 holds onto for us as long as the search term stays the same
var page = vars.page || 1; // figure out what page to query
return params = {
q: term,
page_limit: 10,
page: page,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please use your own so this example keeps working
};
},
results: function (data, vars) {
vars.page = vars.page ? vars.page + 1 : 2; // figure out what page to query next and save it
var more = (vars.page - 1) * 50 < data.total; // whether or not there are more results available
return {results: data.movies, more: more, vars: vars};
}
},
formatResult: function (movie) {
var markup = "<table class='movie-result'><tr>";
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
}
markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
if (movie.critics_consensus !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
}
else if (movie.synopsis !== undefined) {
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
}
markup += "</td></tr></table>"
return markup;
},
formatSelection: function (movie) {
return movie.title;
}
});
});
</script>
<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");
}
);
});
</script>
<script>
$(document).ready(function() {
function setupExampleCode(id) {
var s = $("#script_"+id).html();
s = s.replace(/</g, "&lt;");
s = s.substr(s.indexOf("\n") + 1);
s = s.substr(s.indexOf("\n") + 1);
s = s.substr(0, s.lastIndexOf("\n"));
s = s.substr(0, s.lastIndexOf("\n"));
$("#code_"+id).html(s);
}
setupExampleCode("e2");
setupExampleCode("e3");
setupExampleCode("e4");
setupExampleCode("e5");
setupExampleCode("e6");
setupExampleCode("e7");
setupExampleCode("e8");
prettyPrint();});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29683190-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="index.html">Select2 Latest</a></li>
<li class="active"><a href="select2-1.0.html">Select2 1.0</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>Select2</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
<a href="http://harvesthq.github.com/chosen/">Chosen</a> library.</p>
<p>
<a class="btn btn-primary btn-large" href="https://github.com/ivaynberg/select2">Learn more on GitHub&raquo;</a>
<a class="btn btn-success btn-large" href="https://github.com/ivaynberg/select2/downloads">Download&raquo;</a>
</p>
</div>
<div class="row">
<div class="span12">
<h2>Examples</h2>
<hr/>
</div>
</div>
<div class="row">
<div class="span4">
<h3>The Basics</h3>
<p>Select2 takes a select box like this:</p>
<p><select style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></p>
<p>and turns it into:</p>
<p>
<select id="e1" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</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_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;
&lt;script&gt;
$(document).ready(function() { $(&quot;#e1&quot;).select2(); });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select id=&quot;e1&quot;&gt;
&lt;option value=&quot;AL&quot;&gt;Alabama&lt;/option&gt;
...
&lt;option value=&quot;WY&quot;&gt;Wyoming&lt;/option&gt;
&lt;/select&gt;
&lt;/body&gt;
</pre>
</div>
</div>
<div class="zebra row">
<div class="span4">
<h3>Placeholders</h3>
<p>A placeholder text can be defined that will be displayed until a selection is made:</p>
<p>
<select id="e2" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</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_e2">
</pre>
</div>
</div>
<div class="row">
<div class="span4">
<h3>Minimum Input</h3>
<p>Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:</p>
<p>
<select id="e3" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</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_e3"></pre>
</div>
</div>
<div class="zebra row">
<div class="span4">
<h3>Templating</h3>
<p>Various display options of the Select2 component can be changed:</p>
<p>
<select id="e4" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</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_e4"></pre>
</div>
</div>
<div class="row">
<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 echoed a number of times:</p>
<p>
<input type="hidden" id="e5" style="width:300px"/>
</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e5">
</pre>
</div>
</div>
<div class="zebra row">
<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>
<p>
<input type="hidden" class="bigdrop" id="e6" style="width:600px"/>
</p>
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e6"></pre>
</div>
</div>
<div class="row">
<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.
In order to enable the remote service must support some sort of a paging mechanism and
the query function given to Select2 must take advantage of it. The following example demonstrates
how this can be set up. Search for some keyword and then scroll the result list to the end to
see more results load:</p>
<p>
<input type="hidden" class="bigdrop" id="e7" style="width:600px"/>
</p>
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e7"></pre>
</div>
</div>
<div class="zebra row">
<div class="span4">
<h3>Pragmatic Access</h3>
<p>Select2 supports methods that allow pragmatic control of the componentL</p>
<p>
<select id="e8" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky[6]</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts[6]</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[6]</option><option value="RI">Rhode Island[13]</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" class="btn-primary" id="e8_get" value="Alert selected value"/>
<input type="button" class="btn-info" id="e8_set" value="Set selected value to California"/>
</p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e8"></pre>
</div>
</div>
<div class="row" style="padding-top: 20px;">
<div class="span12"><h2>Documentation</h2><hr/></div>
</div>
<div class="row">
<div class="span12"><h3>Constructor</h3></div>
</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>placeholder</td><td>object</td><td>Initial value that is selected if no other selection is made</td></tr>
<tr><td>formatSelection</td><td>function</td><td>
Function used render the current selection.
<pre>formatSelection(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>The selected result object returned from the <code>query</code> function</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</td><td>Html that represents the selection</td></tr>
</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>
Function used to render a result that the user can select.
<pre>formatResult(object)</pre>
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
<tr><td>object</td><td>object</td><td>One of the result objects returned from the <code>query</code> function</td></tr>
<tr><td>&lt;returns&gt;</td><td>string</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>
Function used to render the &quot;No matches&quot; message
<pre>formatNoMatches(term)</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 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>
Function used to render the &quot;Search input too short&quot; message
<pre>formatInputTooShort(term, minLength)</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 string entered by user</td></tr>
<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>query</td>
<td>function/string</td>
<td>
Function used to query results for the search term.
<pre>query(options)</pre>
<table class="table table-bordered table-striped">
<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.vars</td><td>object</td><td>Object from the previous result, see <code>options.callback</code></td></tr>
<tr><td>options.callback</td><td>function</td>
<td>Callback function that should be called with the <code>result</code> object. The results 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.vars</td><td>object</td><td>A user-defined object that will be passed into the next invocation of <code>query</code> if more results need to be loaded</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>
</table>
</td></tr>
</table>
<hr/>
<code>"ajax"</code> - use the built in ajax query function. This function will handle throttling and dropping out-of-order responses.
</td>
</tr>
<tr><td>ajax</td><td>object</td><td>
Options for the built in ajax query function.
<table class="table table-bordered table-striped">
<tr><th>Parameter</th><th>Type</th><th>Description</th></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>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.
<pre>data(term, vars)</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>vars</td><td>object</td><td>The vars object from the previous search's result</td></tr>
<tr><td>&lt;returns&gt;</td><td>object</td><td>Object containing url paramters</td></tr>
</table>
</td></tr>
<tr><td>results</td><td>function</td><td>
Function used to build the query results object from the ajax response
<pre>results(term, vars)</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>vars</td><td>object</td><td>The vars object from the previous search's result</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>
</td></tr>
</table>
<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">
<tr>
<th>Parameter</th><th>Type</th><th>Description</th>
</tr>
<tr><td>value (optional)</td><td>object</td><td>Result object for the new selection, or the <code>id</code> attribute of a loaded result object</td></tr>
</table>
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
<div class="row">
<div class="span12"><h2>Events</h2></div>
</div>
<div class="row">
<div class="span12"><h3>opened</h3></div>
</div>
<p>Signalled when the search dropdown has been opened</p>
<div class="row">
<div class="span12"><h3>closed</h3></div>
</div>
<p>Signalled when the search dropdown has been closed</p>
<div class="row">
<div class="span12"><h3>cancelled</h3></div>
</div>
<p>Signalled when the user cancells the selection of a result. For example, when ESC is pressed after the dropdown has been opened</p>
<div class="row">
<div class="span12"><h3>selected</h3></div>
</div>
<p>Signals a selection has been made</p>
<div class="row">
<div class="span12"><h2>Community</h2></div>
</div>
<div class="row">
<div class="span12">
<ul>
<li><a href="https://github.com/ivaynberg/select2">Project Site</a></li>
<li><a href="https://github.com/ivaynberg/select2/issues">Bug Tracker</a></li>
<li><a href="https://groups.google.com/d/forum/select2">Mailing List</a></li>
</ul>
</div>
</div>
<hr/>
<footer>
<p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a></p>
</footer>
</div> <!-- /container -->
</body>
</html>

361
select2-master/select2.css Executable file
View File

@ -0,0 +1,361 @@
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
}
.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(top, #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: 29px;
left: 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);
z-index: 999;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.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 {
padding: 3px 4px;
position: relative;
margin: 0;
white-space: nowrap;
z-index: 1010;
}
.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%);
margin: 1px 0;
padding: 4px 20px 4px 5px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
}
.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%);
margin: 1px 0;
padding: 4px 20px 4px 5px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.select2-dropdown-open .select2-choice {
border: 1px solid #aaa;
-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: 0 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;
}
.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-more-results.select2-active {
background: #f4f4f4 url('spinner.gif') no-repeat 100%;
}
.select2-more-results {
background: #f4f4f4;
display: list-item;
}
/* 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 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 20px 3px 5px;
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;
}
.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;
}
/* end multiselect */

1120
select2-master/select2.js Executable file
View File

File diff suppressed because it is too large Load Diff

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB