JSFiddle - React, Tailwind, and code Playground
JavaScript
(function ($) {
'use strict';
function MultipleSelect($el, options) {
var that = this,
name = $el.attr('name') || options.name || '',
elWidth = $el.outerWidth();
this.$el = $el.hide();
this.options = options;
this.$parent = $('<div class="item-parent"></div>');
this.$choice = $('<button type="button" class="item-choice"><span class="placeholder">' + options.placeholder + '</span><div></div></button>');
this.$drop = $('<div class="item-drop ' + options.position + '"></div>');
this.$el.after(this.$parent);
this.$parent.append(this.$choice);
this.$parent.append(this.$drop);
if (this.$el.prop('disabled')) {
this.$choice.addClass('disabled');
}
this.$parent.css('width', options.width || elWidth);
if (!this.options.keepOpen) {
$('body').click(function (e) {
if ($(e.target)[0] === that.$choice[0] || $(e.target).parents('.item-choice')[0] === that.$choice[0]) {
return;
}
if (($(e.target)[0] === that.$drop[0] || $(e.target).parents('.item-drop')[0] !== that.$drop[0]) && that.options.isOpen) {
that.close();
}
});
}
this.selectAllName = 'name="selectAll' + name + '"';
this.selectGroupName = 'name="selectGroup' + name + '"';
this.selectItemName = 'name="selectItem' + name + '"';
}
MultipleSelect.prototype = {
constructor: MultipleSelect,
init: function () {
var that = this,
html = [];
if (this.options.filter) {
html.push(
'<div class="item-search">',
'<input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false">',
'</div>');
}
html.push('<ul>');
if...