Skip to content

Instantly share code, notes, and snippets.

@byroot

byroot/select2-testcase.html

Created June 15, 2012 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save byroot/2937751 to your computer and use it in GitHub Desktop.
Save byroot/2937751 to your computer and use it in GitHub Desktop.
Download ZIP
SHow a failing case with select2
Raw
select2-testcase.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select2 2.1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Select2 JQuery Plugin">
<meta name="author" content="Igor Vaynberg">
<link href="http://ivaynberg.github.com/select2/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="http://ivaynberg.github.com/select2/prettify/prettify.css" rel="stylesheet"/>
<style type="text/css">
.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>
<!--[if lt IE 9]>
<script src="js/html5shim.js"></script>
<![endif]-->
<script src="http://ivaynberg.github.com/select2/js/jquery-1.7.1.min.js"></script>
<script src="http://ivaynberg.github.com/select2/js/jquery-ui-1.8.20.custom.min.js"></script>
<script src="http://ivaynberg.github.com/select2/js/jquery.mousewheel.js"></script>
<script src="http://ivaynberg.github.com/select2/prettify/prettify.min.js"></script>
<script src="http://ivaynberg.github.com/select2/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
function setupExampleCode(id) {
var s = $("#script_"+id).html();
s = s.replace(/</g, "&lt;");
s = s.substr(s.indexOf("\n") + 1);
s = s.substr(s.indexOf("\n") + 1);
s = s.substr(0, s.lastIndexOf("\n"));
s = s.substr(0, s.lastIndexOf("\n"));
$("#code_"+id).html(s);
}
var i, e;
for (i = 2; ; i++) {
e = $("#script_e" + i);
if (e.length == 0) break;
setupExampleCode("e" + i);
}
prettyPrint();
});
</script>
</head>
<body>
<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>
<div class="container">
<link href="http://ivaynberg.github.com/select2/select2-2.1/select2.css" rel="stylesheet"/>
<script src="http://ivaynberg.github.com/select2/select2-2.1/select2.js"></script>
<section>
<article class="row zebra" id="tags">
<script id="script_e12">
$(document).ready(function () {
$("#e12").select2({tags:["red", "green", "blue"], placeholder: "Add some tags"});
$("#e12_button").click(function(event) {
$('#e12').select2('open');
});
});
</script>
<div class="span4">
<h3>Tagging Support with placeholder and programatic open</h3>
<p>When opening programaticaly an empty tag field with a placeholder. The only proposed tag is the placeholder himself.</p>
<p><button class="btn btn-danger" id="e12_button">Open</button><input type="hidden" id="e12" style="width:300px" value=""/> </p>
</div>
<div class="span8">
<h3>Example Code</h3>
<pre class="prettyprint linenums" id="code_e12">
$(document).ready(function () {
$("#e12").select2({
tags:["red", "green", "blue"],
placeholder: "Add some tags"
});
$("#e12_button").click(function(event) {
$('#e12').select2('open');
});
});
</pre>
</div>
</article>
</div> <!-- /container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment