mirror of
https://github.com/ZwareBear/awx.git
synced 2026-03-26 10:43:36 -05:00
629 lines
24 KiB
HTML
Executable File
629 lines
24 KiB
HTML
Executable File
<!doctype 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">
|
|
<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>
|
|
|
|
<p>To let the Select2 widget know if any elements are directly being appended, prepended or both in the context of a <a href="http://getbootstrap.com/components/#input-groups">Bootstrap Input Group</a>, add <code>.select2-bootstrap-prepend</code> and/or <code>.select2-bootstrap-append</code> to the <code>.input-group</code> wrapper element to address Select2's corresponding border-radii.</p>
|
|
|
|
<div class="form-group">
|
|
<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
|
|
<div class="input-group select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" checked>
|
|
</span>
|
|
<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 select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="radio">
|
|
</span>
|
|
<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
|
|
<option></option>
|
|
{% 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 select2-bootstrap-append">
|
|
<select id="single-append-text" class="form-control select2-allow-clear">
|
|
<option></option>
|
|
{% include select2-select.html %}
|
|
</select>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="single-append-text">
|
|
<span class="glyphicon glyphicon-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 select2-bootstrap-prepend">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
</button>
|
|
</span>
|
|
<select id="single-prepend-text" class="form-control select2">
|
|
<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 select2-bootstrap-append">
|
|
<select id="multi-append" class="form-control select2" multiple>
|
|
<option></option>
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
</select>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="multi-append">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
|
|
<div class="input-group select2-bootstrap-prepend">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="multi-prepend">
|
|
State
|
|
</button>
|
|
</span>
|
|
<select id="multi-prepend" class="form-control select2" 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="http://getbootstrap.com/components/#input-groups">Bootstrap Input Groups</a> with <a href="http://getbootstrap.com/css/#forms-control-sizes">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="http://getbootstrap.com/css/#forms-control-sizes">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>Why are some Select2's not scaled?</h4>
|
|
<p>While <code>.select2-container--bootstrap.input-sm</code> and <code>.select2-container--bootstrap.input-lg</code> work as advertised, Select2 4 currently does not offer copying CSS classes from the original <code><select></code> element in an easy way like version 3.x did.</p>
|
|
<p>Click the button for a demo setting the required classes on <code>.select2-container--bootstrap</code>:</p>
|
|
<button class='btn btn-sm btn-primary btn-outline btn-set-scaling-classes js-btn-set-scaling-classes'>Set Sizing Classes</button>
|
|
</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>
|
|
<p class="help-block"><a href="https://select2.github.io/examples.html#rtl">RTL support</a> via <code>dir="rtl"</code></p>
|
|
</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-multiple">
|
|
{% 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 select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="radio">
|
|
</span>
|
|
<select id="select2-single-input-group-sm" class="form-control select2">
|
|
<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>
|
|
<p class="help-block">Example <a href="http://getbootstrap.com/css/#forms-help-text">block-level help text</a>.</p>
|
|
</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">
|
|
{% 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 select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" checked>
|
|
</span>
|
|
<select id="span_large" class="form-control select2">
|
|
<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 input-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 input-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 input-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 select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="radio">
|
|
</span>
|
|
<select id="select2-multiple-input-group-lg" class="form-control select2">
|
|
<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="http://getbootstrap.com/css/?#forms-horizontal">Bootstrap's Horizontal Forms</a> and offers support for <a href="http://getbootstrap.com/css/?#horizontal-form-group-sizes">Horizontal Form Group Sizes</a>, too.</p>
|
|
|
|
<form class="form-horizontal">
|
|
<div class="form-group form-group-lg">
|
|
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
|
|
|
|
<div class="col-sm-5">
|
|
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
|
|
</div>
|
|
|
|
<div class="col-sm-5">
|
|
<select id="select2-button-addons-single-input-group-sm" class="form-control js-data-example-ajax">
|
|
<option value="2126244" selected="selected">twbs/bootstrap</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group form-group-sm">
|
|
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
|
|
|
|
<div class="col-sm-5">
|
|
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
|
|
</div>
|
|
|
|
<div class="col-sm-5">
|
|
<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="form-group">
|
|
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<select id="select2-button-addons-single-input-group-sm" 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">
|
|
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
|
|
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<button type="submit" class="btn btn-default">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">
|
|
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
|
|
<div class="input-group select2-bootstrap-append select2-bootstrap-prepend">
|
|
<div class="input-group-addon">$</div>
|
|
<select class="form-control select2">
|
|
<option></option>
|
|
{% include select2-select.html %}
|
|
</select>
|
|
<div class="input-group-addon">.00</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">
|
|
<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">
|
|
<label class="sr-only" for="exampleInputPassword3">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
|
|
</div>
|
|
<select class="form-control select2">
|
|
<option></option>
|
|
{% include select2-select.html %}
|
|
</select>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Remember me
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">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="http://getbootstrap.com/components/#input-groups-buttons">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 select2-bootstrap-prepend">
|
|
<div class="input-group-btn">
|
|
<button class="btn btn-default" 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 select2-bootstrap-prepend">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
</button>
|
|
</span>
|
|
<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 select2-bootstrap-prepend">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
Action <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</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 select2-bootstrap-prepend">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="select2-input-group-append">
|
|
<span class="glyphicon glyphicon-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 select2-bootstrap-append">
|
|
<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-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-lg">
|
|
<span class="glyphicon glyphicon-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 select2-bootstrap-prepend">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multi-input-group-lg">
|
|
<span class="glyphicon glyphicon-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="http://getbootstrap.com/css/#forms-control-states">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">col-md-3</label>
|
|
<div class="input-group select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox">
|
|
</span>
|
|
<select id="select2-disabled-inputs-single" class="form-control select2" 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">col-md-3</label>
|
|
<div class="input-group select2-bootstrap-prepend">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" checked>
|
|
</span>
|
|
<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, .select2-multiple" ).select2( {
|
|
placeholder: placeholder,
|
|
width: null
|
|
} );
|
|
|
|
$( ".select2-allow-clear" ).select2( {
|
|
allowClear: true,
|
|
placeholder: placeholder,
|
|
width: null
|
|
} );
|
|
|
|
// @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='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
|
|
"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
|
|
"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></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 : "off",
|
|
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, page) {
|
|
// 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
|
|
return {
|
|
results: data.items
|
|
};
|
|
},
|
|
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-waring, .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, .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 ] );
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$( ".js-btn-set-scaling-classes" ).on( "click", function(){
|
|
$( "#select2-multiple-input-sm, #select2-single-input-sm" ).next( ".select2-container--bootstrap" ).addClass( "input-sm" );
|
|
$( "#select2-multiple-input-lg, #select2-single-input-lg" ).next( ".select2-container--bootstrap" ).addClass( "input-lg" );
|
|
$( this ).removeClass( "btn-primary btn-outline" ).prop( "disabled", true );
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|