start copy from cimac web
This commit is contained in:
Vendored
+345
@@ -0,0 +1,345 @@
|
||||
<!-- /*!
|
||||
* Multiple select dropdown with filter jQuery plugin.
|
||||
* Copyright (C) 2022 Andrew Wagner github.com/andreww1011
|
||||
*
|
||||
* This library is free software; you can redistribute it and/or
|
||||
* modify it under the terms of the GNU Lesser General Public
|
||||
* License as published by the Free Software Foundation; either
|
||||
* version 2.1 of the License, or (at your option) any later version.
|
||||
*
|
||||
* This library is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
* Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public
|
||||
* License along with this library; if not, write to the Free Software
|
||||
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
|
||||
* USA
|
||||
*/ -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Multi Select Plugin</title>
|
||||
<style>
|
||||
.notification {color: red; font-size: 85%;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Load jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<!-- Load Bootstrap -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
<!-- Load the plugin bundle. -->
|
||||
<link rel="stylesheet" href="filter_multi_select.css" />
|
||||
<script src="filter-multi-select-bundle.min.js"></script>
|
||||
|
||||
<section class="alternate page-heading">
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Dropdown Filter Multi-select jQuery plugin</h1>
|
||||
</header>
|
||||
<p class="lead"></p>
|
||||
</section>
|
||||
<hr>
|
||||
<div class="container">
|
||||
<p>Click below to open dropdown.<br />
|
||||
Use up/down arrow to focus item and space/enter to select.<br />
|
||||
Type to filter items. Press esc to clear or close.<br />
|
||||
If only one item is showing, press enter to select.<br />
|
||||
Tab/shift-tab to close and cycle to next dropdown.
|
||||
</p>
|
||||
</div>
|
||||
<form class="container" method="GET" id="form">
|
||||
<div class="row">
|
||||
<h4 class="col-12">Default Dropdown</h4>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-10" id="notifications"> </div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="animals">Animals</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="animals" id="animals" class="filter-multi-select">
|
||||
<option value="bear">Bear</option>
|
||||
<option value="ant">Ant</option>
|
||||
<option value="salamander">Salamander</option>
|
||||
<option value="owl">Owl</option>
|
||||
<option value="frog">Frog</option>
|
||||
<option value="shark">Shark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Dropdown with pre-sets and case-sensitive filtering</h4>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="shapes"></label>
|
||||
<div class="col-10">
|
||||
<select multiple name="shapes" id="shapes">
|
||||
<option value="1" selected>Square</option>
|
||||
<option value="2">circle</option>
|
||||
<option value="3">polygon</option>
|
||||
<option value="4">Ellipse</option>
|
||||
<option value="5">Triangle</option>
|
||||
<option value="6" label="rect" selected>Rectangle</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Dropdown with disabled items</h4>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="cars">Cars</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="cars" id="cars">
|
||||
<option value="1" selected>Toyota</option>
|
||||
<option value="2">Honda</option>
|
||||
<option value="3">Ford</option>
|
||||
<option value="4" disabled >BMW</option>
|
||||
<option value="5" selected disabled label="Chevy">Chevrolet</option>
|
||||
<option value="6">Kia</option>
|
||||
<option value="7">Mercedes</option>
|
||||
<option value="8">Subaru</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Dropdown with all items disabled</h4>
|
||||
<div class="container">
|
||||
<button id="b1" type="button">enable Java</button>
|
||||
<button id="b2" type="button">disable Java</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="programming_languages_1">Programming Languages</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="programming_languages_1" id="programming_languages_1">
|
||||
<option value="1" disabled selected>Java</option>
|
||||
<option value="2" disabled>Python</option>
|
||||
<option value="3" disabled label="JS">Javascript</option>
|
||||
<option value="4" disabled>C++</option>
|
||||
<option value="5" disabled>Ruby</option>
|
||||
<option value="6" disabled>Fortran</option>
|
||||
<option value="7" disabled selected>Haskell</option>
|
||||
<option value="8" disabled>C#</option>
|
||||
<option value="9" disabled>Basic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Disabled Dropdown</h4>
|
||||
<div class="container">
|
||||
<button id="b3" type="button">enable dropdown</button>
|
||||
<button id="b4" type="button">disable dropdown</button>
|
||||
<p>...but java is still disabled.<br /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="programming_languages_2">Programming Languages</label>
|
||||
<div class="col-10">
|
||||
<select multiple disabled name="programming_languages_2" id="programming_languages_2">
|
||||
<option value="1" disabled selected>Java</option>
|
||||
<option value="2">Python</option>
|
||||
<option value="3" label="JS">Javascript</option>
|
||||
<option value="4">C++</option>
|
||||
<option value="5">Ruby</option>
|
||||
<option value="6">Fortran</option>
|
||||
<option value="7" selected>Haskell</option>
|
||||
<option value="8">C#</option>
|
||||
<option value="9">Basic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Dropdown with enabling/disabling not permitted</h4>
|
||||
<div class="container">
|
||||
<button id="b5" type="button">enable Java</button>
|
||||
<button id="b6" type="button">disable Java</button>
|
||||
<button id="b7" type="button">enable dropdown</button>
|
||||
<button id="b8" type="button">disable dropdown</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="programming_languages_3">Programming Languages</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="programming_languages_3" id="programming_languages_3">
|
||||
<option value="1" disabled selected>Java</option>
|
||||
<option value="2">Python</option>
|
||||
<option value="3" label="JS">Javascript</option>
|
||||
<option value="4">C++</option>
|
||||
<option value="5">Ruby</option>
|
||||
<option value="6">Fortran</option>
|
||||
<option value="7" selected>Haskell</option>
|
||||
<option value="8">C#</option>
|
||||
<option value="9">Basic</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Dropdown with items added via js</h4>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="cities">Cities</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="cities" id="cities">
|
||||
<option value="1">London</option>
|
||||
<option value="2" selected >New York</option>
|
||||
<option value="3" selected disabled>Los Angeles</option>
|
||||
<option value="4" disabled>Paris</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Single Select</h4>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="colors">Colors</label>
|
||||
<div class="col-10">
|
||||
<select name="colors" id="colors">
|
||||
<option value="1">Red</option>
|
||||
<option value="2">Orange</option>
|
||||
<option value="3">Yellow</option>
|
||||
<option value="4" disabled>Green</option>
|
||||
<option value="5">Blue</option>
|
||||
<option value="6">Indigo</option>
|
||||
<option value="7">Violet</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h4 class="col-12">Limit Selection Count</h4>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-2 col-form-label" for="trees">Trees</label>
|
||||
<div class="col-10">
|
||||
<select multiple name="trees" id="trees">
|
||||
<option value="1">Oak</option>
|
||||
<option value="2" selected disabled>Pine</option>
|
||||
<option value="3" selected >Maple</option>
|
||||
<option value="4" disabled>Poplar</option>
|
||||
<option value="5">Beech</option>
|
||||
<option value="6">Magnolia</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit">Submit Form</button>
|
||||
</form>
|
||||
<div class="container">
|
||||
<button id="jsonbtn1">Get Json (include disabled)</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span id="jsonresult1"></span>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button id="jsonbtn2">Get Json (exclude disabled)</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<span id="jsonresult2"></span>
|
||||
</div>
|
||||
<script>
|
||||
// Use the plugin once the DOM has been loaded.
|
||||
$(function () {
|
||||
// Apply the plugin
|
||||
var notifications = $('#notifications');
|
||||
$('#animals').on("optionselected", function(e) {
|
||||
createNotification("selected", e.detail.label);
|
||||
});
|
||||
$('#animals').on("optiondeselected", function(e) {
|
||||
createNotification("deselected", e.detail.label);
|
||||
});
|
||||
function createNotification(event,label) {
|
||||
var n = $(document.createElement('span'))
|
||||
.text(event + ' ' + label + " ")
|
||||
.addClass('notification')
|
||||
.appendTo(notifications)
|
||||
.fadeOut(3000, function() {
|
||||
n.remove();
|
||||
});
|
||||
}
|
||||
var shapes = $('#shapes').filterMultiSelect({
|
||||
selectAllText: 'all...',
|
||||
placeholderText: 'click to select a shape',
|
||||
filterText: 'search',
|
||||
labelText: 'Shapes',
|
||||
caseSensitive: true,
|
||||
});
|
||||
var cars = $('#cars').filterMultiSelect();
|
||||
var pl1 = $('#programming_languages_1').filterMultiSelect();
|
||||
$('#b1').click((e) => {
|
||||
pl1.enableOption("1");
|
||||
});
|
||||
$('#b2').click((e) => {
|
||||
pl1.disableOption("1");
|
||||
});
|
||||
var pl2 = $('#programming_languages_2').filterMultiSelect();
|
||||
$('#b3').click((e) => {
|
||||
pl2.enable();
|
||||
});
|
||||
$('#b4').click((e) => {
|
||||
pl2.disable();
|
||||
});
|
||||
var pl3 = $('#programming_languages_3').filterMultiSelect({
|
||||
allowEnablingAndDisabling: false,
|
||||
});
|
||||
$('#b5').click((e) => {
|
||||
pl3.enableOption("1");
|
||||
});
|
||||
$('#b6').click((e) => {
|
||||
pl3.disableOption("1");
|
||||
});
|
||||
$('#b7').click((e) => {
|
||||
pl3.enable();
|
||||
});
|
||||
$('#b8').click((e) => {
|
||||
pl3.disable();
|
||||
});
|
||||
var cities = $('#cities').filterMultiSelect({
|
||||
items: [["San Francisco","a"],
|
||||
["Milan","b",false,true],
|
||||
["Singapore","c",true],
|
||||
["Berlin","d",true,true],
|
||||
],
|
||||
});
|
||||
var colors = $('#colors').filterMultiSelect();
|
||||
var trees = $('#trees').filterMultiSelect({
|
||||
selectionLimit: 3,
|
||||
});
|
||||
$('#jsonbtn1').click((e) => {
|
||||
var b = true;
|
||||
$('#jsonresult1').text(JSON.stringify(getJson(b),null," "));
|
||||
});
|
||||
var getJson = function (b) {
|
||||
var result = $.fn.filterMultiSelect.applied
|
||||
.map((e) => JSON.parse(e.getSelectedOptionsAsJson(b)))
|
||||
.reduce((prev,curr) => {
|
||||
prev = {
|
||||
...prev,
|
||||
...curr,
|
||||
};
|
||||
return prev;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
$('#jsonbtn2').click((e) => {
|
||||
var b = false;
|
||||
$('#jsonresult2').text(JSON.stringify(getJson(b),null," "));
|
||||
});
|
||||
$('#form').on('keypress keyup', function(e) {
|
||||
var keyCode = e.keyCode || e.which;
|
||||
if (keyCode === 13) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user