2012-03-04 23:04:06 +04:00
<!DOCTYPE html>
2012-03-04 23:18:37 +04:00
< 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" / >
2012-03-26 10:19:41 +04:00
< link href = "select2-master/select2.css" rel = "stylesheet" / >
2012-03-04 23:18:37 +04:00
< style type = "text/css" >
body {
padding-top: 60px;
}
.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 >
2012-03-26 10:19:41 +04:00
< script src = "js/jquery.mousewheel.js" > < / script >
2012-03-04 23:18:37 +04:00
< script src = "prettify/prettify.min.js" > < / script >
< script src = "bootstrap/js/bootstrap.min.js" > < / script >
2012-03-26 10:19:41 +04:00
< script src = "select2-master/select2.js" > < / script >
2012-03-04 23:18:37 +04:00
< script id = "script_e1" >
$(document).ready(function() {
$("#e1").select2();
});
< / script >
< script id = "script_e2" >
$(document).ready(function() {
$("#e2").select2({
2012-03-26 10:19:41 +04:00
placeholder: "Select a State",
allowClear: true
2012-03-04 23:18:37 +04:00
});
});
< / 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);
2012-03-04 23:04:06 +04:00
}
2012-03-04 23:18:37 +04:00
});
});
< / script >
2012-03-26 10:19:41 +04:00
< script >
function movieFormatResult(movie) {
2012-03-04 23:18:37 +04:00
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;
2012-03-26 10:19:41 +04:00
}
function movieFormatSelection(movie) {
2012-03-04 23:18:37 +04:00
return movie.title;
2012-03-04 23:04:06 +04:00
}
2012-03-26 10:19:41 +04:00
< / 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 {
2012-04-13 22:30:13 +04:00
q: term, // search term
2012-03-26 10:19:41 +04:00
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
};
},
2012-04-13 22:30:13 +04:00
results: function (data, page) { // parse the results into the format expected by Select2.
2012-03-26 10:19:41 +04:00
// 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
2012-03-04 23:18:37 +04:00
});
});
< / script >
< script id = "script_e7" >
$(document).ready(function() {
$("#e7").select2({
placeholder: {title: "Search for a movie", id: ""},
2012-03-26 10:19:41 +04:00
minimumInputLength: 3,
2012-03-04 23:18:37 +04:00
ajax: {
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 100,
2012-03-26 10:19:41 +04:00
data: function (term, page) { // page is the one-based page number tracked by Select2
return {
2012-04-13 22:30:13 +04:00
q: term, //search term
2012-03-26 10:19:41 +04:00
page_limit: 10, // page size
page: page, // page number
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
2012-03-04 23:18:37 +04:00
};
},
2012-03-26 10:19:41 +04:00
results: function (data, page) {
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};
2012-03-04 23:18:37 +04:00
}
},
2012-03-26 10:19:41 +04:00
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
2012-03-04 23:18:37 +04:00
});
});
< / script >
2012-03-26 10:19:41 +04:00
< script id = "script_e9" >
$(document).ready(function() {
$("#e9").select2();
2012-03-04 23:18:37 +04:00
});
< / script >
2012-03-04 23:04:06 +04:00
2012-03-29 01:33:34 +04:00
< script id = "script_e10" >
$(document).ready(function() {
$("#e10").select2({
data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
});
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
function format(item) { return item.tag; };
$("#e10_2").select2({
data:{ results: data, text: 'tag' },
formatSelection: format,
formatResult: format
});
$("#e10_3").select2({
data:{ results: data, text: function(item) { console.log('called with', item); return item.tag; } },
formatSelection: format,
formatResult: format
});
});
< / script >
2012-03-04 23:04:06 +04:00
2012-03-04 23:18:37 +04:00
< 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);
}
2012-03-29 01:33:34 +04:00
var i, e;
for (i = 2; ; i++) {
e = $("#script_e" + i);
if (e.length == 0) break;
setupExampleCode("e" + i);
}
prettyPrint();
});
2012-03-04 23:18:37 +04:00
< / script >
2012-03-04 23:23:49 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< / head >
< body >
2012-03-26 10:30:54 +04:00
2012-03-04 23:18:37 +04:00
< 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" >
2012-03-26 10:19:41 +04:00
< li class = "active" > < a href = "index.html" > Select2 Latest< / a > < / li >
< li > < a href = "select2-1.0.html" > Select2 1.0< / a > < / li >
2012-03-04 23:18:37 +04:00
< / ul >
< / div > <!-- /.nav - collapse -->
< / div >
< / div >
2012-03-04 23:04:06 +04:00
< / div >
2012-03-26 10:30:54 +04:00
< a href = "https://github.com/ivaynberg/select2" > < img style = "position: absolute; top: 0; right: 0; border: 0; z-index: 2000" src = "https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt = "Fork me on GitHub" > < / a >
2012-03-04 23:18:37 +04:00
< div class = "container" >
2012-03-04 23:04:06 +04:00
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-04 23:04:06 +04:00
2012-03-04 23:18:37 +04:00
< div class = "row" >
< div class = "span12" >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< / div >
< / div >
2012-03-04 23:04:06 +04:00
2012-03-26 10:19:41 +04:00
< header class = "jumbotron subhead" >
< div class = "subnav" >
< ul class = "nav nav-pills" >
2012-03-26 10:43:00 +04:00
< li > < a href = "#changelog" > Changelog< / a > < / li >
< li class = "dropdown" >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-29 01:33:34 +04:00
< li > < a href = "#data" > Loading Data< / a > < / li >
< li > < a href = "#data_array" > Array Data< / a > < / li >
2012-03-26 10:19:41 +04:00
< li > < a href = "#ajax" > Remote/AJAX Data< / a > < / li >
< li > < a href = "#infinite" > Infinite Scrolling of Remote/AJAX data< / a > < / li >
2012-04-11 23:05:35 +04:00
< li > < a href = "#tags" > Tagging Support< / a > < / li >
2012-03-26 10:19:41 +04:00
< li > < a href = "#pragmatic" > Pragmatic control< / a > < / li >
2012-03-31 01:06:52 +04:00
< li > < a href = "#event_change" > Events: Change< / a > < / li >
2012-04-11 23:05:35 +04:00
< li > < a href = "#event_ext_change" > Events: Reacting to External Changes< / a > < / li >
2012-03-26 10:19:41 +04:00
< / ul >
< / li >
< li > < a href = "#documentation" > Documentation< / a > < / li >
< li > < a href = "#about" > About< / a > < / li >
< / ul >
< / div >
< / header >
2012-03-26 10:43:00 +04:00
< section id = "changelog" >
< h2 > Changelog< / h2 >
< div class = "row" > < div class = "span12" >
< ul >
< li > Support for selection of multiple values. See < code > multiple< / code > option in the docs.< / li >
< li > Ability to reset back to placeholder once a selection has been made. See < code > allowClear< / code > option in the docs.< / li >
< li > Simplified paging of remote datasets by tracking the page number automatically.< / li >
2012-03-30 20:47:07 +04:00
< li > Minimum required jQuery version changed from 1.7+ to 1.4.2< / li >
2012-03-26 10:43:00 +04:00
< / ul >
< / div > < / div >
< / section >
2012-03-04 23:04:06 +04:00
2012-03-26 10:19:41 +04:00
< section >
2012-03-04 23:18:37 +04:00
< div class = "row" >
2012-03-26 10:19:41 +04:00
< div class = "span12" >
< h2 > Examples< / h2 >
< hr / >
< / div >
< / div >
2012-03-29 01:33:34 +04:00
2012-03-26 10:19:41 +04:00
< article class = "row" id = "basics" >
2012-03-04 23:18:37 +04:00
< div class = "span4" >
< h3 > The Basics< / h3 >
2012-03-26 10:19:41 +04:00
< 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< / 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 >
2012-03-04 23:18:37 +04:00
< p > and turns it into:< / p >
< p >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
2012-03-26 10:19:41 +04:00
< p > with support for quick option filtering via a search box< / p >
2012-03-04 23:18:37 +04:00
< / 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 >
2012-03-26 10:19:41 +04:00
< / article >
< 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 >
2012-03-04 23:04:06 +04:00
2012-03-26 10:19:41 +04:00
< article class = "row" id = "placeholders" >
2012-03-04 23:18:37 +04:00
< div class = "span4" >
< h3 > Placeholders< / h3 >
2012-03-26 10:19:41 +04:00
< p > A placeholder value can be defined and will be displayed until a selection is made:< / p >
2012-03-04 23:18:37 +04:00
< p >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-29 01:33:34 +04:00
2012-03-04 23:18:37 +04:00
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e2" >
< / pre >
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-26 10:19:41 +04:00
< article class = "zebra row" id = "minimum" >
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e3" > < / pre >
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-26 10:19:41 +04:00
< article class = "row" id = "templating" >
2012-03-04 23:18:37 +04:00
< div class = "span4" >
< h3 > Templating< / h3 >
< p > Various display options of the Select2 component can be changed:< / p >
< p >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e4" > < / pre >
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-26 10:19:41 +04:00
< article class = "zebra row" id = "data" >
2012-03-04 23:18:37 +04:00
< div class = "span4" >
< h3 > Loading Data< / h3 >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< p >
< input type = "hidden" id = "e5" style = "width:300px" / >
< / p >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e5" >
< / pre >
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-29 01:33:34 +04:00
< article class = "row" id = "data_array" >
< div class = "span4" >
< h3 > Loading Array Data< / h3 >
< p > Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a < code > query< / code > function mentioned in the example above.< / p >
< p > Example below inlines the data by specifying an array in the < code > data< / code > element. Items in such an array must have < code > id< / code > and < code > text< / code > keys.< / p >
< p >
< input type = "hidden" id = "e10" style = "width:300px" / >
< / p >
< p > If your data does not have a < code > text< / code > key, an alternative key can be specified as a string:< / p >
< p >
< input type = "hidden" id = "e10_2" style = "width:300px" / >
< / p >
< p > or as a function:< / p >
< p >
< input type = "hidden" id = "e10_3" style = "width:300px" / >
< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e10" >
< / pre >
< / div >
< / article >
< article class = "zebra row" id = "ajax" >
2012-03-04 23:18:37 +04:00
< 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 >
2012-04-11 23:18:11 +04:00
< p > Select2 uses jQuery's < code > $.ajax< / code > function to execute the remote call by default. An alternative < code > transport< / code > function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom < code > query< / code > function instead of using the < code > ajax< / code > helper< / p >
2012-03-04 23:18:37 +04:00
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-29 01:33:34 +04:00
< article class = "row" id = "infinite" >
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-29 01:33:34 +04:00
< article class = "zebra row" id = "pragmatic" >
2012-04-13 19:18:29 +04:00
< script id = "script_e8" >
$(document).ready(function() {
$("#e8").select2();
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
$("#e8_open").click(function () { $("#e8").select2("open"); });
$("#e8_close").click(function () { $("#e8").select2("close"); });
$("#e8_2").select2();
$("#e8_2_get").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});
$("#e8_2_set").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
});
< / script >
< div class = "span4" >
2012-03-04 23:18:37 +04:00
< h3 > Pragmatic Access< / h3 >
< p > Select2 supports methods that allow pragmatic control of the componentL< / p >
2012-04-13 19:18:29 +04:00
< p >
< input type = "button" class = "btn-primary" id = "e8_get" value = "Alert selected value" / >
< input type = "button" class = "btn-info" id = "e8_set" value = "Set to California" / >
< input type = "button" class = "btn-warning" id = "e8_open" value = "Open" / >
< input type = "button" class = "btn-warning" id = "e8_close" value = "Close" / >
< / p >
2012-03-04 23:18:37 +04:00
< p >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
2012-04-13 19:18:29 +04:00
< 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" / >
< input type = "button" class = "btn-warning" id = "e8_2_open" value = "Open" / >
< input type = "button" class = "btn-warning" id = "e8_2_close" value = "Close" / >
< / p >
2012-03-26 10:19:41 +04:00
< 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 / >
2012-03-04 23:18:37 +04:00
< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e8" > < / pre >
< / div >
2012-03-26 10:19:41 +04:00
< / article >
2012-03-04 23:18:37 +04:00
2012-03-31 01:06:52 +04:00
< article class = "row" id = "event_change" >
< script id = "script_e11" >
$(document).ready(function () {
$("#e11").select2({
placeholder: "Select report type",
allowClear: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
$("#e11_2").select2({
2012-04-10 11:33:45 +04:00
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
2012-03-31 01:06:52 +04:00
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function show() {
var e=$("< div style = 'background-color:yellow;' > change fired< / div > ");
$("#events_11").append(e);
e.animate({opacity:0}, 1000, 'linear', function() { e.remove(); });
};
$("#e11").bind("change", show);
$("#e11_2").bind("change", show);
});
< / script >
< div class = "span4" >
< h3 > Change Event< / h3 >
< p > Select2 triggers the < code > change< / code > event on the original element whenever its value is changed by
the user< / p >
< p > < input type = "hidden" id = "e11" style = "width:300px" / > < / p >
< p > < input type = "hidden" id = "e11_2" style = "width:300px" / > < / p >
< p id = "events_11" > < / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e11" >
< / pre >
< / div >
< / article >
2012-04-10 18:46:29 +04:00
< article class = "row zebra" id = "tags" >
2012-04-10 11:33:45 +04:00
< script id = "script_e12" >
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"]});
});
< / script >
< div class = "span4" >
< h3 > Tagging Support< / h3 >
< p > Select2 can be used to quickly set up fields used for tagging< / p >
2012-04-13 19:09:10 +04:00
< p > < input type = "hidden" id = "e12" style = "width:300px" value = "brown, red, green" / > < / p >
2012-04-10 11:33:45 +04:00
< p > Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
picking the first choice which is what the user has typed into the search box so far.< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e12" >
< / pre >
< / div >
< / article >
2012-03-31 01:06:52 +04:00
2012-04-11 23:05:35 +04:00
< article class = "row" id = "event_ext_change" >
< script id = "script_e13" >
$(document).ready(function () {
$("#e13").select2();
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
});
< / script >
< div class = "span4" >
< h3 > Reacting to external value changes< / h3 >
< p > Select2 can react to external value changes and keep its selection in-sync. This feature allows
Select2 to work seamlessly with front-end frameworks that use data binding between ui components
and model values.< / p >
< p > < select id = "e13" multiple style = "width:300px" > < option value = "AL" selected > Alabama< / option > < option value = "AK" > Alaska< / option > < option value = "AZ" selected > Arizona< / option > < option value = "AR" > Arkansas< / option > < option value = "CA" > California< / option > < option value = "CO" > Colorado< / option > < option value = "CT" > Connecticut< / option > < option value = "DE" > Delaware< / option > < option value = "FL" > Florida< / option > < option value = "GA" > Georgia< / option > < option value = "HI" > Hawaii< / option > < option value = "ID" > Idaho< / option > < option value = "IL" > Illinois< / option > < option value = "IN" > Indiana< / option > < option value = "IA" > Iowa< / option > < option value = "KS" > Kansas< / option > < option value = "KY" > Kentucky< / option > < option value = "LA" > Louisiana< / option > < option value = "ME" > Maine< / option > < option value = "MD" > Maryland< / option > < option value = "MA" > Massachusetts< / option > < option value = "MI" > Michigan< / option > < option value = "MN" > Minnesota< / option > < option value = "MS" > Mississippi< / option > < option value = "MO" > Missouri< / option > < option value = "MT" > Montana< / option > < option value = "NE" > Nebraska< / option > < option value = "NV" > Nevada< / option > < option value = "NH" > New Hampshire< / option > < option value = "NJ" > New Jersey< / option > < option value = "NM" > New Mexico< / option > < option value = "NY" > New York< / option > < option value = "NC" > North Carolina< / option > < option value = "ND" > North Dakota< / option > < option value = "OH" > Ohio< / option > < option value = "OK" > Oklahoma< / option > < option value = "OR" > Oregon< / option > < option value = "PA" > Pennsylvania< / option > < option value = "RI" > Rhode Island< / option > < option value = "SC" > South Carolina< / option > < option value = "SD" > South Dakota< / option > < option value = "TN" > Tennessee< / option > < option value = "TX" > Texas< / option > < option value = "UT" > Utah< / option > < option value = "VT" > Vermont< / option > < option value = "VA" > Virginia< / option > < option value = "WA" > Washington< / option > < option value = "WV" > West Virginia< / option > < option value = "WI" > Wisconsin< / option > < option value = "WY" > Wyoming< / option > < / select > < br / > < / p >
< p > < input type = "button" id = "e13_ca" class = "btn btn-primary" value = "Select California" / > < input type = "button" id = "e13_ak_co" class = "btn btn-primary" value = "Select Alaska and Colorado" / > < / p >
< p class = "alert alert-alert" > This feature is only available when initSelection() function is provided in
the options. This function is needed to map the choice ids set on the element to objects used by
Select2. This function is set by default when Select2 is attached to a < code > select< / code > or when
the < code > tags< / code > helper function is used.< / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e13" >
< / pre >
< / div >
< / article >
2012-04-12 10:29:12 +04:00
< article class = "row zebra" id = "lifecycle" >
< script id = "script_e14" >
$(document).ready(function () {
$("#e14").select2();
$("#e14_init").click(function() { $("#e14").select2(); });
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
});
< / script >
< div class = "span4" >
< h3 > Select2 Lifecycle< / h3 >
< p >
< / p >
< p > < select id = "e14" multiple style = "width:300px" > < option value = "AL" selected > Alabama< / option > < option value = "AK" > Alaska< / option > < option value = "AZ" selected > Arizona< / option > < option value = "AR" > Arkansas< / option > < option value = "CA" > California< / option > < option value = "CO" > Colorado< / option > < option value = "CT" > Connecticut< / option > < option value = "DE" > Delaware< / option > < option value = "FL" > Florida< / option > < option value = "GA" > Georgia< / option > < option value = "HI" > Hawaii< / option > < option value = "ID" > Idaho< / option > < option value = "IL" > Illinois< / option > < option value = "IN" > Indiana< / option > < option value = "IA" > Iowa< / option > < option value = "KS" > Kansas< / option > < option value = "KY" > Kentucky< / option > < option value = "LA" > Louisiana< / option > < option value = "ME" > Maine< / option > < option value = "MD" > Maryland< / option > < option value = "MA" > Massachusetts< / option > < option value = "MI" > Michigan< / option > < option value = "MN" > Minnesota< / option > < option value = "MS" > Mississippi< / option > < option value = "MO" > Missouri< / option > < option value = "MT" > Montana< / option > < option value = "NE" > Nebraska< / option > < option value = "NV" > Nevada< / option > < option value = "NH" > New Hampshire< / option > < option value = "NJ" > New Jersey< / option > < option value = "NM" > New Mexico< / option > < option value = "NY" > New York< / option > < option value = "NC" > North Carolina< / option > < option value = "ND" > North Dakota< / option > < option value = "OH" > Ohio< / option > < option value = "OK" > Oklahoma< / option > < option value = "OR" > Oregon< / option > < option value = "PA" > Pennsylvania< / option > < option value = "RI" > Rhode Island< / option > < option value = "SC" > South Carolina< / option > < option value = "SD" > South Dakota< / option > < option value = "TN" > Tennessee< / option > < option value = "TX" > Texas< / option > < option value = "UT" > Utah< / option > < option value = "VT" > Vermont< / option > < option value = "VA" > Virginia< / option > < option value = "WA" > Washington< / option > < option value = "WV" > West Virginia< / option > < option value = "WI" > Wisconsin< / option > < option value = "WY" > Wyoming< / option > < / select > < br / > < / p >
< p > < input type = "button" id = "e14_init" class = "btn btn-primary" value = "Init" / > < input type = "button" id = "e14_destroy" class = "btn btn-warning" value = "Destroy" / > < / p >
< p class = "alert alert-alert" > < / p >
< / div >
< div class = "span8" >
< h3 > Example Code< / h3 >
< pre class = "prettyprint linenums" id = "code_e14" >
< / pre >
< / div >
< / article >
2012-04-11 23:05:35 +04:00
2012-03-26 10:19:41 +04:00
< / section >
2012-03-31 01:06:52 +04:00
<!-- -->
<!-- DOCUMENTATION -->
<!-- -->
2012-03-26 10:19:41 +04:00
< section id = "documentation" >
2012-03-29 01:33:34 +04:00
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-29 02:22:14 +04:00
< tr > < td > minimumResultsForSearch< / td > < td > int< / td > < td >
< p >
The minimum number of results that must be initially (after opening the dropdown for the first time)
populated in order to keep the search field. This
is useful for cases where local data is used with just a few results, in which case the search box
is not very useful and wastes screen space.
< / p >
< p class = "alert alert-info" > Only applies to single-value select boxes< / p >
< / td >
< / tr >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< tr > < td > formatSelection< / td > < td > function< / td > < td >
2012-03-26 10:19:41 +04:00
Function used to render the current selection.
2012-03-04 23:18:37 +04:00
< 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 >
2012-04-10 11:33:45 +04:00
< tr > < td > createSearchChoice< / td > < td > function< / td > < td >
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
< pre > createSearchChoice(term)< / pre >
< 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 > object (optional)< / td > < td > Object representing the new choice.
Must at least contain an < code > id< / code > attribute.< / td > < / tr >
< / table >
If the function returns < code > undefined< / code > or < code > null< / code > no choice will be created. If a new
choice is created it is displayed first in the selection list so that user may select it by simply pressing
< code > enter< / code > .
< p class = "alert alert-warning" > When used in combination with < code > input[type=hidden]< / code > tag care
must be taken to sanitize the < code > id< / code > attribute of the choice object, especially stripping
< code > ,< / code > as it is used as a value separator< / p >
< / td > < / tr >
2012-04-10 18:46:29 +04:00
< tr > < td > initSelection< / td > < td > function< / td > < td >
Called when Select2 is created to allow the user to initialize the selection based on the value of the
element select2 is attached to.
< p >
Essentially this is an < code > id->object< / code > mapping function.
< / p >
< pre > initSelection(element)< / pre >
< table class = "table table-bordered table-striped" >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < / tr >
< tr > < td > element< / td > < td > jQuery array< / td > < td > element Select2 is attached to< / td > < / tr >
< tr > < td > < returns> < / td > < td > object or array of objects< / td > < td > < code > Object< / code > representing the choice
to be selected, or an < code > array< / code > of such objects in case Select2 is in multi mode.< / td > < / tr >
< / table >
< p class = "alert alert-info" > This function will only be called when there is initial input to be processed.< / p >
Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
the text:
< pre class = "prettyprint" >
$("#tags").select2({
initSelection : function (element) {
var data = [];
$(element.val().split(",")).each(function () {
data.push({id: this, text: this});
});
return data;
}
});
< / pre >
< / td > < / tr >
2012-03-04 23:18:37 +04:00
< tr >
< td > query< / td >
2012-03-26 10:19:41 +04:00
< td > function< / td >
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< tr > < td > options.callback< / td > < td > function< / td >
2012-03-26 10:19:41 +04:00
< td > Callback function that should be called with the < code > result< / code > object. The result object:
2012-03-04 23:18:37 +04:00
< table class = "table table-bordered table-striped" >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < / tr >
< tr > < td > result.results< / td > < td > [object]< / td > < td > Array of result objects. The default renderers expect objects with < code > id< / code > and < code > text< / code > keys< / code > . The < code > id< / code > attribute is required< / code > , even if custom renderers are used.< / td > < / tr >
< tr > < td > result.more< / td > < td > boolean< / td > < td > < code > true< / code > if more results are available for the current search term< / td > < / tr >
< / table >
< / td > < / tr >
< / table >
2012-03-26 10:44:31 +04:00
< p class = "alert alert-warning" > In order for this function to work Select2 should be attached to a < code > input type='hidden'< / code > tag instead of a < code > select< / code > .< / p >
2012-03-04 23:18:37 +04:00
< / td >
< / tr >
< tr > < td > ajax< / td > < td > object< / td > < td >
2012-03-26 10:19:41 +04:00
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.
2012-03-04 23:18:37 +04:00
< table class = "table table-bordered table-striped" >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < / tr >
2012-04-11 23:18:11 +04:00
< tr > < td > transport< / td > < td > function< / td > < td > Function that will be used to perform the ajax request. Must be parameter-compatible with < code > $.ajax< / code > . Defaults to < code > $.ajax< / code > if not specified.
Allows the use of various ajax wrapper libraries such as: < a href = "http://www.protofunc.com/scripts/jquery/ajaxManager/" > AjaxManager< / a > . < / td > < / tr >
2012-03-04 23:18:37 +04:00
< 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.
2012-03-26 10:19:41 +04:00
< pre > data(term, page)< / pre >
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:19:41 +04:00
< tr > < td > page< / td > < td > int< / td > < td > 1-based page number tracked by Select2 for use with infinite scrolling of results< / td > < / tr >
2012-03-04 23:18:37 +04:00
< 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
2012-04-13 22:30:13 +04:00
< pre > results(data, page)< / pre >
2012-03-04 23:18:37 +04:00
< table class = "table table-bordered table-striped" >
< tr > < th > Parameter< / th > < th > Type< / th > < th > Description< / th > < / tr >
2012-04-13 22:30:13 +04:00
< tr > < td > data< / td > < td > object< / td > < td > Retrieved data< / td > < / tr >
2012-03-26 10:19:41 +04:00
< tr > < td > page< / td > < td > int< / td > < td > Page number that was passed into the < code > data< / code > function above< / td > < / tr >
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:44:31 +04:00
< p class = "alert alert-warning" > In order for this function to work Select2 should be attached to a < code > input type='hidden'< / code > tag instead of a < code > select< / code > .< / p >
2012-03-04 23:18:37 +04:00
< / td > < / tr >
2012-03-29 01:33:34 +04:00
< tr > < td > data< / td > < td > array/object< / td > < td >
Options for the built in query function that works with arrays.
< p > If this element contains an array, each element in the array must contain < code > id< / code > and < code > text< / code > keys< / p >
< p > Alternatively, this element can be specified as an object in which < code > results< / code > key must contain the data as an array and a < code > text< / code > key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array< / p >
< / td > < / tr >
2012-04-10 11:33:45 +04:00
< tr > < td > tags< / td > < td > array/function< / td > < td >
Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
this options attribute which is either an < code > array< / code > or a < code > function< / code > that returns an
array of < code > objects< / code > or < code > strings< / code > . If < code > strings< / code > are used instead of < code > objects< / code >
they will be converted into an object that has an < code > id< / code > and < code > text< / code > attribute equal
to the value of the < code > string< / code > .
< / td > < / tr >
2012-03-04 23:18:37 +04:00
< / table >
2012-03-29 01:33:34 +04:00
2012-03-04 23:18:37 +04:00
< 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 >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< / table >
Example: < pre class = "prettyprint" > alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});< / pre >
2012-04-13 19:18:29 +04:00
< div class = "row" >
2012-04-12 10:29:12 +04:00
< div class = "span12" > < h3 > destroy< / h3 > < / div >
< / div >
< p > Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.< / p >
2012-04-13 19:18:29 +04:00
< div class = "row" >
< div class = "span12" > < h3 > open< / h3 > < / div >
< / div >
< p > Opens the dropdown< / p >
< div class = "row" >
< div class = "span12" > < h3 > close< / h3 > < / div >
< / div >
< p > Closes the dropdown< / p >
2012-03-04 23:18:37 +04:00
< div class = "row" >
< div class = "span12" > < h2 > Events< / h2 > < / div >
< / div >
< div class = "row" >
2012-03-31 01:06:52 +04:00
< div class = "span12" >
< h3 > change< / h3 >
< p > Fired when selection is changed.< / p >
< p class = "alert alert-info" > This event is not fired when the selection is changed using Select2's < code > val()< / code > method.< / p >
< / div >
2012-03-04 23:18:37 +04:00
< / div >
2012-03-31 01:06:52 +04:00
2012-03-29 01:33:34 +04:00
2012-03-26 10:19:41 +04:00
< / section >
< section id = "about" >
2012-03-04 23:18:37 +04:00
< div class = "row" >
2012-03-26 10:19:41 +04:00
< div class = "span12" > < h2 > About< / h2 > < / div >
2012-03-04 23:18:37 +04:00
< / 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 >
2012-03-26 10:19:41 +04:00
< / section >
2012-03-04 23:18:37 +04:00
< hr / >
< footer >
2012-03-26 10:19:41 +04:00
< 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 >
2012-03-04 23:18:37 +04:00
< / footer >
2012-03-04 23:04:06 +04:00
2012-03-04 23:18:37 +04:00
< / div > <!-- /container -->
< / body >
2012-03-04 23:04:06 +04:00
< / html >
