JSFiddle - React, Tailwind, and code Playground

by Rohit Bisht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group-btn">
  <input data-toggle="dropdown" class="btn btn-default dropdown multi-dorpdown" type="text" id="searchbar" placeholder="Branches" />
  <ul role="menu" class="dropdown-menu multi-dropdown-menu" id="dropdownul" tabindex="-1">
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 1</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 2</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 3</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 4</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 5</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 6</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 7</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 8</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 1</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 2</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 3</span>
        </a>
    </li>
    <li>
      <a href="#">
          <input class="multi-checkboxes" type="checkbox"><span> Item 4</span>
        </a>
...

CSS

body {
  padding: 40px;
}

input.multi-checkboxes {
  display: none;
}

.selected a {
  background-color: #fffb30;
}

.dropdown-menu>li.selected.active>a:hover {
  background-color: #93fc83;
  color: red;
}

.dropdown-menu>li.selected.active>a {
  background-color: #93fc83;
  color: red;
}

.multi-dropdown-menu {
  max-height: 250px;
  overflow-y: scroll;
}

JavaScript

$(document).ready(function() {
  var id_searchbar = "searchbar";
  var id_dropdownul = "dropdownul";
  $("#" + id_searchbar).focusout(function(e) {
    $("#" + id_searchbar).val("");
  });
  $("#" + id_searchbar).focusin(function(e) {
    $('.multi-dropdown-menu').each(function() {
      $(this).find('li').each(function() {
        $(this).removeClass("active");
      });
    });
    $('#' + id_dropdownul).find("li:first").focus().addClass("active");
  });

  $("#" + id_searchbar).keyup(function(e) {
    var input, filter, ul, li, a, i, b;
    input = document.getElementById(id_searchbar);
    filter = input.value.toUpperCase();
    div = document.getElementById(id_dropdownul);
    a = div.getElementsByTagName("span");
    b = div.getElementsByTagName("li");
    for (i = 0; i < a.length; i++) {
      if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        b[i].style.display = "";
      } else {
        b[i].style.display = "none";
      }
    }
    var storeTarget;
    if (e.which === 40 && !$(".active").is(":last-child")) {
      e.preventDefault();
      if ($("#" + id_dropdownul + " li.active").length != 0) {
        storeTarget = $('#' + id_dropdownul).find("li.active").next();
        $("#" + id_dropdownul + " li.active").removeClass("active");
        storeTarget.focus().addClass("active");
      } else {
        $('#' + id_dropdownul).find("li:first").focus().addClass("active");
      }

      if ($('.active').position().top + $('.active').height() >= $('.multi-dropdown-menu').scrollTop() + $('.multi-dropdown-menu').height()) {
        $('.multi-dropdown-menu').scrollTop($('.active').position().top)
      }
      return;
    }
    if (e.which === 38 && !$(".active").is(":first-child")) {
      if ($("#" + id_dropdownul + " li.active").length != 0) {
        storeTarget = $('#dropdownul').find("li.active").prev();
        $("#" + id_dropdownul + " li.active").removeClass("active");
        storeTarget.focus().addClass("active");
      } else {
    ...