Removed old version pages
This commit is contained in:
Kevin Brown
parent
449b9b86ec
commit
bf83721ada
1011
select-2.1.html
1011
select-2.1.html
File diff suppressed because it is too large
Load Diff
466
select2-1.0.html
466
select2-1.0.html
@ -1,466 +0,0 @@
|
|||||||
---
|
|
||||||
layout: main
|
|
||||||
title: Select2 1.0
|
|
||||||
group: navigation
|
|
||||||
version: 1.0
|
|
||||||
---
|
|
||||||
<link href="select2-1.0/select2.css" rel="stylesheet"/>
|
|
||||||
<script src="select2-1.0/select2-1.0.js"></script>
|
|
||||||
|
|
||||||
<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 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>
|
|
||||||
|
|
||||||
|
|
||||||
<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>Programmatic Access</h3>
|
|
||||||
<p>Select2 supports methods that allow programmatic 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 parameters</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:"California"});</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 cancels 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>
|
|
||||||
@ -1,266 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<script src="js/jquery-1.8.1.js"></script>
|
|
||||||
<script src="select2-master/select2.js"></script>
|
|
||||||
<link href="select2-master/select2.css" rel="stylesheet"/>
|
|
||||||
<style>img.flag { height: 10px; width: 15px; padding-right: 10px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- <div style="height:200px;"></div> -->
|
|
||||||
<div style="padding: 10px; margin: 10px;">
|
|
||||||
<br/><br/><br/>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<select id="tst">
|
|
||||||
<option value="" selected="selected">Should-be-active option</option>
|
|
||||||
<option value="1">Second option</option>
|
|
||||||
</select>
|
|
||||||
<script>$(function() { $("#tst").select2(); });</script>
|
|
||||||
<br/><br/><br/>
|
|
||||||
|
|
||||||
<input type="text" value="tab!" autofocus>
|
|
||||||
<input type="text" id="input">
|
|
||||||
<input type="text" value="ooops! skipped selector">
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$("#input").select2({data:[]});
|
|
||||||
$("#input").select2({data:[]});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<input type="text" size="30"/><br/>
|
|
||||||
<label for="e4">Label: </label>
|
|
||||||
<div style="white-space: nowrap">
|
|
||||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<select multiple id="e42" style="width:300px" >
|
|
||||||
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
||||||
<option value="AK" data-locked="true" selected="selected">Alaska</option>
|
|
||||||
<option value="HI" disabled="disabled" selected="selected">Hawaii</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="Pacific Time Zone">
|
|
||||||
<option value="CA">California</option>
|
|
||||||
<option value="NV">Nevada</option>
|
|
||||||
<option value="OR">Oregon</option>
|
|
||||||
<option value="WA">Washington</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="Mountain Time Zone">
|
|
||||||
<option value="AZ">Arizona</option>
|
|
||||||
<option value="CO">Colorado</option>
|
|
||||||
<option value="ID">Idaho</option>
|
|
||||||
<option value="MT">Montana</option><option value="NE" selected="selected">Nebraska</option>
|
|
||||||
<option value="NM">New Mexico</option>
|
|
||||||
<option value="ND">North Dakota</option>
|
|
||||||
<option value="UT">Utah</option>
|
|
||||||
<option value="WY">Wyoming</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="Central Time Zone">
|
|
||||||
<option value="AL">Alabama</option>
|
|
||||||
<option value="AR">Arkansas</option>
|
|
||||||
<option value="IL">Illinois</option>
|
|
||||||
<option value="IA">Iowa</option>
|
|
||||||
<option value="KS">Kansas</option>
|
|
||||||
<option value="KY">Kentucky</option>
|
|
||||||
<option value="LA">Louisiana</option>
|
|
||||||
<option value="MN">Minnesota</option>
|
|
||||||
<option value="MS">Mississippi</option>
|
|
||||||
<option value="MO">Missouri</option>
|
|
||||||
<option value="OK">Oklahoma</option>
|
|
||||||
<option value="SD">South Dakota</option>
|
|
||||||
<option value="TX">Texas</option>
|
|
||||||
<option value="TN">Tennessee</option>
|
|
||||||
<option value="WI">Wisconsin</option>
|
|
||||||
</optgroup>
|
|
||||||
<optgroup label="Eastern Time Zone">
|
|
||||||
<option value="CT">Connecticut</option>
|
|
||||||
<option value="DE">Delaware</option>
|
|
||||||
<option value="FL">Florida</option>
|
|
||||||
<option value="GA">Georgia</option>
|
|
||||||
<option value="IN">Indiana</option>
|
|
||||||
<option value="ME">Maine</option>
|
|
||||||
<option value="MD">Maryland</option>
|
|
||||||
<option value="MA">Massachusetts</option>
|
|
||||||
<option value="MI">Michigan</option>
|
|
||||||
<option value="NH">New Hampshire</option><option value="NJ">New Jersey</option>
|
|
||||||
<option value="NY">New York</option>
|
|
||||||
<option value="NC">North Carolina</option>
|
|
||||||
<option value="OH">Ohio</option>
|
|
||||||
<option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option>
|
|
||||||
<option value="VT">Vermont</option><option value="VA">Virginia</option>
|
|
||||||
<option value="WV">West Virginia</option>
|
|
||||||
</optgroup>
|
|
||||||
</select></div><br/>
|
|
||||||
<input type="text" size="30"/><br/>
|
|
||||||
<select id="e5" style="width:300px" multiple>
|
|
||||||
<option value="AK">Alaska</option>
|
|
||||||
<option value="HI">Hawaii</option>
|
|
||||||
<option value="CA">California</option>
|
|
||||||
<option value="NV">Nevada</option>
|
|
||||||
<option value="OR">Oregon</option>
|
|
||||||
<option value="WA">Washington</option>
|
|
||||||
</select><br/>
|
|
||||||
<input type="text" size="30"/><br/>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<div class="a">INSIDE A</div>
|
|
||||||
<div class="b">INSIDE B<input type="text" value="hello" class="c"/></div>
|
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
$(".c").on("focus", function() {
|
|
||||||
$(this).detach().appendTo($(".a"));
|
|
||||||
this.focus();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<input id="filter" multiple style="width: 250px;">
|
|
||||||
|
|
||||||
<button id='reset' class='btn'>Reset</button>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
|
|
||||||
$('#filter').select2({
|
|
||||||
multiple: true,
|
|
||||||
data:[{id:0,text:'enhancement'},{id:1,text:'bug'}]
|
|
||||||
});
|
|
||||||
$('#reset').on('click', function() {
|
|
||||||
$('#filter').select2('val','');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function format(state) {
|
|
||||||
if (!state.id) return state.text; // optgroup
|
|
||||||
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
|
|
||||||
}
|
|
||||||
$("#e5").select2();
|
|
||||||
$("#e4").select2({
|
|
||||||
formatResult: format,
|
|
||||||
formatSelection: format,
|
|
||||||
escapeMarkup: function(m) { return m; },
|
|
||||||
allowClear:true,
|
|
||||||
placeholder: "select a state",
|
|
||||||
maximumInputLength:3,
|
|
||||||
minimumResultsForSearch: 2
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<label for="e6">Label: </label>
|
|
||||||
|
|
||||||
<input type="hidden" class="bigdrop" id="e6" style="width:600px" value="16340"/>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script id="script_e6">
|
|
||||||
|
|
||||||
function movieFormatResult(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;
|
|
||||||
}
|
|
||||||
|
|
||||||
function movieFormatSelection(movie) {
|
|
||||||
return movie.title;
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
|
||||||
$("#e6").select2({
|
|
||||||
placeholder: "Search for a movie",
|
|
||||||
minimumInputLength: 3,
|
|
||||||
ajax: {
|
|
||||||
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
|
|
||||||
dataType: 'jsonp',
|
|
||||||
quietMillis: 100,
|
|
||||||
data: function (term, page) { // page is the one-based page number tracked by Select2
|
|
||||||
return {
|
|
||||||
q: term, //search term
|
|
||||||
page_limit: 10, // page size
|
|
||||||
page: page, // page number
|
|
||||||
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
|
|
||||||
};
|
|
||||||
},
|
|
||||||
results: function (data, page) {
|
|
||||||
console.log("loaded page: ", page, "with total: ", data.total);
|
|
||||||
var more = (page * 10) < data.total; // whether or not there are more results available
|
|
||||||
|
|
||||||
// notice we return the value of more so Select2 knows if more results can be loaded
|
|
||||||
return {results: data.movies, more: more};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
|
|
||||||
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
|
|
||||||
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
|
|
||||||
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
|
|
||||||
,loadMorePadding:400
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<select id="select7">
|
|
||||||
<option value=""></option>
|
|
||||||
<option value="1" selected="selected">Foo</option>
|
|
||||||
<option value="2">Bar</option>
|
|
||||||
<option value="3">Baaaaaaaaaaaaaaz</option>
|
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
$('#select7').select2({
|
|
||||||
allowClear: true,
|
|
||||||
placeholder: 'Loooooong string',
|
|
||||||
width: 'off'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
-->
|
|
||||||
<div style="position: absolute; left:0; top:0; background: white; border: 1px solid red;" id="focus-spy">hello there</div>
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
var el=$("#focus-spy");
|
|
||||||
$(window).bind("scroll", function(){ el.css({top:$(window).scrollTop()}); });
|
|
||||||
var update=function() {
|
|
||||||
var a=document.activeElement;
|
|
||||||
var b=$(a);
|
|
||||||
el.html("tag: "+a.tagName+" id:"+a.id+" class:"+b.attr("class")+" val:"+b.val());
|
|
||||||
window.setTimeout(update, 100);
|
|
||||||
};
|
|
||||||
update();
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<input type="text" size="width:300px" id="tags"/>
|
|
||||||
<script>
|
|
||||||
$(function() {
|
|
||||||
$("#tags").select2({tags:["one","two","three"]})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user