select2-theme-bootstrap4
Version:
A theme for Select2 v4 and Bootstrap 4.
687 lines (617 loc) • 25.3 kB
HTML
<html class="demo">
{% include head.html %}
<body>
{% include navbar.html %}
<div class="container">
<div class="form-group">
<label for="default" class="control-label">Default textbox</label>
<input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="form-group">
<label for="single" class="control-label">Select2 single select</label>
<select id="single" class="form-control select2-single">
<option></option>
{% include select2-select.html %}
</select>
</div>
<div class="form-group">
<label for="multiple" class="control-label">Select2 multi select</label>
<select id="multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
<div class="page-header">
<h1 id="input-groups">Input Groups</h1>
</div>
<div class="form-group">
<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" checked>
</div>
</div>
<select id="select2-single-append" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="form-group">
<label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="form-group">
<label for="single-append-text" class="control-label">Select2 append</label>
<div class="input-group">
<select id="single-append-text" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
<span class="input-group-append">
<button class="btn btn-secondary" type="button" data-select2-open="single-append-text">
<span class="fa fa-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<label for="single-prepend-text" class="control-label">Select2 prepend</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="single-prepend-text">
<span class="fa fa-search"></span>
</button>
</div>
<select id="single-prepend-text" class="form-control select2-single">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
<div class="form-group">
<label for="multi-append" class="control-label">Select2 multi append</label>
<div class="input-group">
<select id="multi-append" class="form-control select2-multiple" multiple>
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div class="input-group-append">
<button class="btn btn-secondary" type="button" data-select2-open="multi-append">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="multi-prepend">
State
</button>
</div>
<select id="multi-prepend" class="form-control select2-multiple" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="form-group">
<label for="multi-prepend-append" class="control-label">Select2 multi append + prepend</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="multi-prepend-append">
State
</button>
</div>
<select id="multi-prepend-append" class="form-control select2-multiple" multiple>
<option></option>
{% include select2-select.html %}
</select>
<div class="input-group-append">
<span class="input-group-text">
… is my favorite!
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="input-group-only" class="control-label">Select2 in input-group <em>(no append or prepend)</em></label>
<div class="input-group">
<select id="input-group-only" class="form-control select2-multiple" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="page-header">
<h1 id="rtl-support-and-control-sizing">
RTL Support and Bootstrap Control Sizing
</h1>
</div>
<p>
The theme offers styles to display "small" and "large" Select2 widgets in
<a href="https://getbootstrap.com/docs/4.0/components/input-group/">Bootstrap Input Groups</a> with
<a href="https://getbootstrap.com/docs/4.0/components/input-group/#sizing">Bootstrap Control Sizing</a> classes applied
(e. g. Select2 in <code>.input-group.input-group-sm</code> or <code>.input-group.input-group-lg</code>).
You may also apply the <a href="https://getbootstrap.com/docs/4.0/components/input-group/#sizing">Bootstrap Control Sizing</a>
classes directly to the <code>.select2-container</code> to alter its appearance.
</p>
<div class="alert alert-info" role="alert">
<h4>Requires select2.full.js</h4>
<p>Those of you familiar with Select2 v3 remember that the default behavior was to copy the original elements CSS-classes to the container of the Select2 element. Select2 v4 provides a similar functionality in its full build, <a href="https://github.com/select2/select2/blob/master/dist/js/select2.full.js">select2.full.js</a>. It contains a compatibility module which behaves similar to v3 in copying CSS classes from the original <code><select></code> element. To invoke, set the <code>containerCssClass</code> option to <code>:all:</code>.</p>
</div>
<div class="row">
<div class="col-md-4">
<label for="select2-multiple-input-sm" class="control-label">col-md-4</label>
<select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple" multiple dir="rtl">
{% include select2-select.html %}
</select>
<small class="form-text text-muted"><a href="https://select2.github.io/examples.html#rtl">RTL support</a> via <code>dir="rtl"</code></small>
</div>
<div class="col-md-3">
<label for="select2-single-input-sm" class="control-label">col-md-3</label>
<select id="select2-single-input-sm" class="form-control input-sm select2-single">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="bootstrap-input-sm" class="control-label">Bootstrap input</label>
<input id="bootstrap-input-sm" class="form-control input-sm" placeholder=".input-sm">
</div>
<div class="col-md-3">
<div class="form-group has-success">
<label for="select2-single-input-group-sm" class="control-label">col-md-3</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<select id="select2-single-input-group-sm" class="form-control select2-single">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 has-warning">
<label for="select2-multiple" class="control-label">col-md-4</label>
<select id="select2-multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
<small class="form-text text-muted">Example <a href="https://getbootstrap.com/docs/4.0/components/forms/#help-text">block-level help text</a>.</small>
</div>
<div class="col-md-3">
<label for="span_small" class="control-label">col-md-3</label>
<select id="span_small" class="form-control select2-single">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="span-medium">Bootstrap input</label>
<input id="span-medium" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<div class="form-group">
<label for="span_large" class="control-label">col-md-3</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" checked>
</div>
</div>
<select id="span_large" class="form-control select2-single">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label for="select2-multiple-input-lg" class="control-label">col-md-4</label>
<select id="select2-multiple-input-lg" class="form-control form-control-lg select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
<div class="col-md-3">
<label for="select2-single-input-lg" class="control-label">col-md-3</label>
<select id="select2-single-input-lg" class="form-control form-control-lg select2-multiple" dir="rtl">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="bootstrap-input-lg" class="control-label">Bootstrap input</label>
<input id="bootstrap-input-lg" class="form-control form-control-lg" placeholder=".input-lg">
</div>
<div class="col-md-3">
<div class="form-group has-error">
<label for="select2-multiple-input-group-lg" class="control-label">col-md-3</label>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<select id="select2-multiple-input-group-lg" class="form-control select2-single">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<h2 id="horizontal-form-group-sizes">
Horizontal form group sizes
</h2>
<p>
The theme's styles work in <a href="https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form">Bootstrap's Horizontal Forms</a>
and offers support for <a href="https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form-label-sizing">Horizontal Form Group Sizes</a>, too.
</p>
<form class="form-horizontal">
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-lg" for="formGroupInputLarge">Large label</label>
<div class="col-sm-5">
<input class="form-control form-control-lg" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
<div class="col-sm-5">
<select class="form-control form-control-lg js-data-example-ajax">
<option value="2126244" selected="selected">twbs/bootstrap</option>
</select>
</div>
</div>
<div class="form-group form-group-sm row">
<label class="col-sm-2 col-form-label col-form-label-sm" for="formGroupInputSmall">Small label</label>
<div class="col-sm-5">
<input class="form-control form-control-sm" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
<div class="col-sm-5">
<select class="form-control form-control-sm js-data-example-ajax" dir="rtl">
<option value="2126244" selected="selected">twbs/bootstrap</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="select2-horizontal-3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<select id="select2-horizontal-3" class="form-control js-data-example-ajax" multiple>
<option value="2126244" selected="selected">twbs/bootstrap</option>
<option value="3620194" selected="selected">select2/select2</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>
<div class="page-header">
<h1 id="inline-forms">
Inline Forms
</h1>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form-inline">
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<select class="form-control select2-single" id="exampleInputAmount">
<option></option>
{% include select2-select.html %}
</select>
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form-inline">
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<select class="form-control select2-single mb-2 mr-sm-2 mb-sm-0">
<option></option>
{% include select2-select.html %}
</select>
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"> Remember me
</label>
</div>
<button type="submit" class="btn btn-secondary">Sign in</button>
</form>
</div>
</div>
<div class="page-header">
<h1 id="button-addons">
Button Addons
</h1>
</div>
<p>Tests for Select2 widgets used in context with Bootstrap's <a href="https://getbootstrap.com/docs/4.0/components/input-group/#button-addons">Button Addons</a>.</p>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group-sm" class="control-label">Select2 custom data load</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="select2-button-addons-single-input-group-sm">
State
</button>
</div>
<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax" dir="rtl">
<option value="2126244" selected="selected">twbs/bootstrap</option>
</select>
</div>
</div>
<div class="col-md-5">
<label for="select2-button-addons-multiple-input-group-sm" class="control-label">col-md-5</label>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
<span class="fa fa-search"></span>
</button>
</div>
<select id="select2-button-addons-multiple-input-group-sm" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group" class="control-label">Select2 custom data load</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<select id="select2-button-addons-single-input-group" class="form-control js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
</div>
</div>
<div class="col-md-5">
<label for="select2-input-group-append" class="control-label">col-md-5</label>
<div class="input-group has-warning">
<span class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="select2-input-group-append">
<span class="fa fa-search"></span>
</button>
</span>
<select id="select2-input-group-append" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group-lg" class="control-label">Select2 custom data load</label>
<div class="input-group input-group-lg">
<select id="select2-button-addons-single-input-group-lg" class="form-control js-data-example-ajax" multiple>
<option value="2126244" selected="selected">twbs/bootstrap</option>
<option value="3620194" selected="selected">select2/select2</option>
</select>
<span class="input-group-append">
<button class="btn btn-secondary" type="button" data-select2-open="select2-button-addons-single-input-group-lg">
<span class="fa fa-search"></span>
</button>
</span>
</div>
</div>
<div class="col-md-5">
<label for="select2-button-addons-multi-input-group-lg" class="control-label">col-md-5</label>
<div class="input-group input-group-lg">
<span class="input-group-prepend">
<button class="btn btn-secondary" type="button" data-select2-open="select2-button-addons-multi-input-group-lg">
<span class="fa fa-search"></span>
</button>
</span>
<select id="select2-button-addons-multi-input-group-lg" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="page-header">
<h1 id="disabled-inputs">Disabled inputs and options</h1>
</div>
<p>
The theme applies Bootstrap's styles for <a href="https://getbootstrap.com/docs/4.0/components/forms/#disabled-forms">disabled input elements</a>
and for disabled dropdown options to the Select2 widgets and its options. Also see Select2's documentation on its
"<a href="https://select2.github.io/examples.html#disabled">Disabled mode</a>".
</p>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="select2-disabled-inputs-single" class="control-label">Select2 single</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<select id="select2-disabled-inputs-single" class="form-control select2-single" disabled>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="select2-disabled-inputs-multiple" class="control-label">Select2 multiple</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" checked>
</div>
</div>
<select id="select2-disabled-inputs-multiple" class="form-control select2-multiple" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
</div>
{% include footer.html %}
{% include scripts.html %}
<script src="js/bootstrap.min.js"></script>
<script src="js/anchor.min.js"></script>
<script>
anchors.options.placement = 'left';
anchors.add('.container h1, .container h2, .container h3, .container h4, .container h5');
// Set the "bootstrap" theme as the default theme for all Select2
// widgets.
//
// @see https://github.com/select2/select2/issues/2927
$.fn.select2.defaults.set( "theme", "bootstrap" );
var placeholder = "Select a State";
$( ".select2-single, .select2-multiple" ).select2( {
placeholder: placeholder,
width: null,
containerCssClass: ':all:'
} );
$( ".select2-allow-clear" ).select2( {
allowClear: true,
placeholder: placeholder,
width: null,
containerCssClass: ':all:'
} );
// @see https://select2.github.io/examples.html#data-ajax
function formatRepo( repo ) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if ( repo.description ) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><span class='fa fa-flash'></span> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><span class='fa fa-star'></span> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><span class='fa fa-ey'></span> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection( repo ) {
return repo.full_name || repo.text;
}
$( ".js-data-example-ajax" ).select2({
width : null,
containerCssClass: ':all:',
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
$( "button[data-select2-open]" ).click( function() {
$( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
});
$( ":checkbox" ).on( "click", function() {
$( this ).parent().nextAll( "select" ).prop( "disabled", !this.checked );
});
// copy Bootstrap validation states to Select2 dropdown
//
// add .has-warning, .has-error, .has-succes to the Select2 dropdown
// (was #select2-drop in Select2 v3.x, in Select2 v4 can be selected via
// body > .select2-container) if _any_ of the opened Select2's parents
// has one of these forementioned classes (YUCK! ;-))
$( ".select2-single, .select2-multiple, .select2-allow-clear, .js-data-example-ajax" ).on( "select2:open", function() {
if ( $( this ).parents( "[class*='has-']" ).length ) {
var classNames = $( this ).parents( "[class*='has-']" )[ 0 ].className.split( /\s+/ );
for ( var i = 0; i < classNames.length; ++i ) {
if ( classNames[ i ].match( "has-" ) ) {
$( "body > .select2-container" ).addClass( classNames[ i ] );
}
}
}
});
</script>
</body>
</html>