updated for changes in master
This commit is contained in:
Igor Vaynberg
parent
ad6ebdeea3
commit
56eb0ae10c
360
index.html
360
index.html
@ -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>
|
||||||
@ -279,16 +311,17 @@ $("#e8_set").click(
|
|||||||
</div>
|
</div>
|
||||||
</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(
|
|||||||
</body>
|
</body>
|
||||||
</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,26 +448,36 @@ $("#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>
|
||||||
|
<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>
|
||||||
</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>
|
||||||
</div>
|
</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><option></option></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><returns></td><td>object</td><td>Object containing url paramters</td></tr>
|
<tr><td><returns></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><returns></td><td>object</td><td>Results object. See "options.callback" in the "query" function for format.</td></tr>
|
<tr><td><returns></td><td>object</td><td>Results object. See "options.callback" in the "query" 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
84
js/jquery.mousewheel.js
Executable 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
585
select2-1.0.html
Executable 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, "<");
|
||||||
|
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»</a>
|
||||||
|
<a class="btn btn-success btn-large" href="https://github.com/ivaynberg/select2/downloads">Download»</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">
|
||||||
|
<head>
|
||||||
|
<link href="select2.css" rel="stylesheet"/>
|
||||||
|
<script src="select2.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() { $("#e1").select2(); });
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<select id="e1">
|
||||||
|
<option value="AL">Alabama</option>
|
||||||
|
...
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</select>
|
||||||
|
</body>
|
||||||
|
</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><returns></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><returns></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 "No matches" 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><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>formatInputTooShort</td><td>function</td><td>
|
||||||
|
Function used to render the "Search input too short" message
|
||||||
|
<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><returns></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><returns></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><returns></td><td>object</td><td>Results object. See "options.callback" in the "query" 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
361
select2-master/select2.css
Executable 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
1120
select2-master/select2.js
Executable file
File diff suppressed because it is too large
Load Diff
BIN
select2-master/select2.png
Executable file
BIN
select2-master/select2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
BIN
select2-master/spinner.gif
Executable file
BIN
select2-master/spinner.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in New Issue
Block a user