Multiselect dropdown

Multiselect dropdown items

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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: pink;
  border: 1px solid black;
}

.selectedLI {
  background-color: pink;
  border: 1px solid black;
}

JavaScript

$(document).ready(function() {
  $("#searchbar").keyup(function(e) {
    var input, filter, ul, li, a, i;
    input = document.getElementById("searchbar");
    filter = input.value.toUpperCase();
    div = document.getElementById("dropdownul");
    a = div.getElementsByTagName("a");
    
    for (i = 0; i < a.length; i++) {
    console.log(a[i].innerHTML.toUpperCase().indexOf(filter));
      if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
      } else {
        a[i].style.display = "none";
      }
    }
    if (e.which == 40) {
      if ($("#dropdownul li.selectedLI").length != 0) {
        console.log($("#dropdownul li.selectedLI").length);
        var storeTarget = $('#search_results').find("li").next();
        $("#dropdownul li.selectedLI").removeClass("selectedLI");
        storeTarget.focus().addClass("selectedLI");
      } else {
        console.log("here2");
        $('#dropdownul').find("li:first").focus().addClass("selectedLI");
      }
      return;
    }
    if (e.which == 38) {
      if ($("#dropdownul li.selectedLI").length != 0) {
        var storeTarget = $('#dropdownul').find("li").prev();
        $("#dropdownul li.selectedLI").removeClass("selectedLI");
        storeTarget.focus().addClass("selectedLI");
      } else {
        $('#dropdownul').find("li:first").focus().addClass("selectedLI");
      }
      return;
    }
    /*     if (e.which === 40) {
          $(this).parent().find(".dropdown-menu li a:first").focus();
        } */
  });

  $('.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...