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">
    <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>
    </li>
   ...

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;
}

.open>.dropdown-menu {
  display: block;
  max-height: 150px;
  overflow-y: scroll;
}

.multi-dropdown-menu {
  margin-top: 0px;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  border-top-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

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() {
      var a, i, b;
      div = document.getElementById(id_dropdownul);
      a = div.getElementsByTagName("span");
      b = div.getElementsByTagName("li");
      for (i = 0; i < a.length; i++) {
        b[i].style.display = "";
      }
      $(this).find('li').each(function() {
        $(this).removeClass("active");
      });
    });
    $('#' + id_dropdownul).find("li:first").focus().addClass("active");
  });
  $("#" + id_searchbar).on('keydown', function(e) {
    if (e.which == 38 || e.which == 40)
      e.preventDefault();
  });
  var scroll = 0;
  var scrolltop = 0;
  $("#" + 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";
      }
    }
/*     console.log("\n$('li.active').position().top : " + $('li.active').position().top);
    console.log("$('li.active').height() : " + $('li.active').height());
    console.log("$('.multi-dropdown-menu').scrollTop() : " + $('.multi-dropdown-menu').scrollTop());
    console.log("$('.multi-dropdown-menu').height() : " + $('.multi-dropdown-menu').height());
    if ($('.active').position().top + $('.active').height() >= $('.multi-dropdown-menu').scrollTop() + $('.multi-dropdown-menu').height()) {
      $('.multi-dropdown-menu').scrollTop($('.active').position().top)
    } */
    var storeTarget = "";
    if (e.which === 40...