filter-multi-select v1.4.0

Multiple select dropdown with filter jQuery plugin.

by andreww1011

HTML

<!-- /*! 
 *  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 Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <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...

CSS

/*! 
 *  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
 */
:root {
    --fms-badge-text-color: white;
    --fms-badge-color: var(--primary)
}

.filter-multi-select.dropup, .filter-multi-select.dropdown {
    position: relative;
}

.filter-multi-select .dropdown-toggle::after {
    all: unset;
}

.filter-multi-select .dropdown-toggle:empty::after {
    all: unset;
}

.filter-multi-select > .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.filter-multi-select > .dropdown-toggle:empty::before {
    margin-right: 0.255em;
}

.filter-multi-select > .viewbar {
    white-space: normal;
    font-size: 0.875rem;
    font-weight: 400;
    height: auto;
    cursor: pointer;
}

.filter-multi-select > .viewbar > .selected-items > .item {
    margin: .125rem .25rem .125rem 0;
    padding: 0px 0px 0px .5em;
    display: inline-flex;
    height: 1.875em;
    color: var(--fms-badge-text-color);
    background-color: var(--fms-badge-color);
   ...

JavaScript

(function($){"use strict";function _interopDefaultLegacy(e){return e&&typeof e==="object"&&"default"in e?e:{"default":e}}var $__default=_interopDefaultLegacy($);var __extends=undefined&&undefined.__extends||function(){var extendStatics=function(d,b){extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d,b){d.__proto__=b}||function(d,b){for(var p in b)if(Object.prototype.hasOwnProperty.call(b,p))d[p]=b[p]};return extendStatics(d,b)};return function(d,b){extendStatics(d,b);function __(){this.constructor=d}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __)}}();var NULL_OPTION=new(function(){function class_1(){}class_1.prototype.initialize=function(){};class_1.prototype.select=function(){};class_1.prototype.deselect=function(){};class_1.prototype.enable=function(){};class_1.prototype.disable=function(){};class_1.prototype.isSelected=function(){return false};class_1.prototype.isDisabled=function(){return true};class_1.prototype.getListItem=function(){return document.createElement("div")};class_1.prototype.getSelectedItemBadge=function(){return document.createElement("div")};class_1.prototype.getLabel=function(){return"NULL_OPTION"};class_1.prototype.getValue=function(){return"NULL_OPTION"};class_1.prototype.show=function(){};class_1.prototype.hide=function(){};class_1.prototype.isHidden=function(){return true};class_1.prototype.focus=function(){};class_1.prototype.activate=function(){};class_1.prototype.deactivate=function(){};return class_1}());var FilterMultiSelect=function(){function FilterMultiSelect(selectTarget,args){var _this=this;this.documentKeydownListener=function(e){switch(e.key){case"Tab":e.stopPropagation();_this.closeDropdown();break;case"ArrowUp":e.stopPropagation();e.preventDefault();_this.decrementItemFocus();_this.focusItem();break;case"ArrowDown":e.stopPropagation();e.preventDefault();_this.incrementItemFocus();_this.focusItem();break;case"Enter":case"Spacebar":case"...