JSFiddle - React, Tailwind, and code Playground

by InfinitiesLoop

HTML

<link rel="stylesheet" href="http://toolkit.web.blizzard.net/static/css/toolkit/bnet-web.min.css">
<script src="http://toolkit.web.blizzard.net/static/js/toolkit/toolkit.min.js"></script>
<div style="padding: 10px;" class="js-enabled">
    <label class="checkbox-label"><input type="checkbox"/>test</label>
    <div class='multiselect'>
        <div class="dropdown">
            <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" onclick="return false;">
        test1, test2, test3
            </a>
            <div class="dropdown-menu" role="menu">
                <input class="searchtext" type="text" placeholder="Search" />
                <ul class="unstyled">
                    <li><label class="checkbox-label"><input type="checkbox"/>test value 1</label></li>
                    <li><label class="checkbox-label"><input type="checkbox"/>value two</label></li>
                    <li><label class="checkbox-label"><input type="checkbox"/>this is another value</label></li>
                </ul>
            </div>
        </div>
    </div>
    
    
    <div class='multiselect'>
        <div class="dropdown">
            <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#" onclick="return false;">
        test1, test2, test3
            </a>
            <div class="dropdown-menu" role="menu">
                <input class="searchtext" type="text" placeholder="Search" />
                <ul class="unstyled">
                    <li><label class="checkbox-label"><input type="checkbox"/>test value 1</label></li>
                    <li><label class="checkbox-label"><input type="checkbox"/>value two</label></li>
                    <li><label class="checkbox-label"><input type="checkbox"/>this is another value</label></li>
                </ul>
            </div>
        </div>
    </div>    
    
    <hr/>
    
<form method="get" novalidate="novalidate" class="js-enabled">
  <fieldset class="grid-33 suffix-66">
   ...

CSS

.multiselect  * {
    box-sizing: border-box;
}
.multiselect {
    display: inline-block;
}
.multiselect > .dropdown > .dropdown-menu {
    padding: 1px;
}
.multiselect > .dropdown > .dropdown-menu > .searchtext {
    border: 0;
    margin: 0;
    padding: 5px;
    box-shadow: none; 
    height: 24px;
}
.multiselect > .dropdown > .dropdown-menu > ul {
    padding: 5px;
}
.multiselect > .dropdown > .dropdown-menu > ul > li > label {
    margin-bottom: 5px;
}

JavaScript

$.fn.multiselect = function() {
    return this.each(function() {
        var $this = $(this),
            $dropdown = $this.find(".dropdown"),
            $dropdownMenu = $dropdown.find(".dropdown-menu");

        $dropdown.on("click", function(ev) {
            var $target = $(ev.target);
            if ($target.is(".dropdown-toggle")) {
                var isOpen = $dropdown.toggleClass("open").is(".open");
                if (isOpen) {
                    var $current = $.fn.multiselect.current;
                    if ($current && $current !== $dropdown && $current.is(".open")) {
                        $current.find(".dropdown-toggle").click();
                    }
                    $.fn.multiselect.current = $dropdown;
                }
                return false;
            }
            else {
                ev.stopPropagation();
            }
        });
    });
};

$(".multiselect").multiselect();