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">
  <div class="input-group-btn">
    <input tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="text" id="searchbar" />

    <ul role="menu" class="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>
    </ul>
  </div>
  <input type="text" class="form-control">
</div>

CSS

body {
  padding: 40px;
}

input.multi-checkboxes {
  display: none;
}

.dropdown-menu li a:focus {
  background-color: red;
}

JavaScript

$(document).ready(function() {
  $("#searchbar").keyup(function(e) {
    if (e.which === 40) {
      $(this).parent().find(".dropdown-menu li a:first").focus();
    }
    var input, filter, ul, li, a, i, b;
    input = document.getElementById("searchbar");
    filter = input.value.toUpperCase();
    div = document.getElementById("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";
      }
    }
  });

  $('.dropdown-menu li').on('click', function(e) {
    $(this).find("input[type=checkbox]").attr("checked", !$(this).find("input[type=checkbox]").attr("checked"));
    if ($(this).find("input[type=checkbox]").attr("checked")) {
      $(this).addClass("active");
    } else {
      $(this).removeClass("active");
    }
    getSelectedItems();
    e.stopPropagation();
  });
});

function getSelectedItems() {
  var line = "";
  $("ul.dropdown-menu input[type=checkbox]").each(function() {
    if ($(this).is(":checked")) {
      //$(this).closest("li").css("background-color","red");
      line += $("+ span", this).text() + ",";
    }
  });
  $("input.form-control").val(line);
}