Dropdown with search

Dropdown with search and multiselect

by Rohit Bisht

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="dropdown">
  <button data-toggle="dropdown" class="filter btn btn-default dropdown multi-dorpdown" type="text" id="buttonId">Branches</button>
  <div role="menu" class="dropWithSearch dropdown-menu " tabindex="-1">
    <div class="dropWithSearch-input-div">
      <input class="dropWithSearch-input" type="text" id="filter_branch" placeholder="Search" title="Type in a name">
    </div>
    <div class="dropWithSearch-option-div">
      <ul class="multi-dropdown-menu" id="filter_branch_ul">
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="41" type="checkbox" name="branches"><span>41-HARIANA</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="47" type="checkbox" name="branches"><span>47-DORAHA</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="51" type="checkbox" name="branches"><span>51-NAWANPIND DONEWAL</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="9001" type="checkbox" name="branches"><span>9001-BC-POONIA(B.O. LOHIAN)</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="9007" type="checkbox" name="branches"><span>9007-BC-LAKHAN KALAN(B.O. KAPURTHALA)</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="9009" type="checkbox" name="branches"><span>9009-BC-CHAKHAKIM (B.O. PHAGWARA)</span></a></li>
        <li class="" style=""><a href="#"><input class="multi-checkboxes" id="9006" type="checkbox" name="branches"><span>9006-BC-BOPARAI KALAN(B.O. NAKODAR)</span></a></li>
        <li class="" style=""><a href="#"><input...

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : 19 Feb, 2018, 3:34:37 PM
    Author     : rabinder.bisht
*/

.open>.dropWithSearch {
  display: block;
  width: auto;
}

body {
  padding: 40px;
}

.dropdown {
  font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
}

.dropWithSearch {
  width: 100px;
  position: relative;
  padding-top: 0px !important;
}

.dropWithSearch-input-div {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 200;
  padding: 4px;
}

.dropWithSearch-input {
  width: 100%;
  font-size: 1em;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  margin-bottom: 0px !important;
  border-radius: 3px;
}

.dropWithSearch-option-div {
  position: relative;
  width: 100%;
  max-height: 300px;
  overflow-y: scroll;
  z-index: 100;
}

.multi-dropdown-menu {
  border-collapse: collapse;
  width: 100%;
  border: 0px;
  font-size: 18px;
  margin: 0px !important;
  padding: 4px !important;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.multi-dropdown-menu li {
  border-bottom: 2px solid white;
}

.multi-dropdown-menu li a {
  border: 0px solid #ddd;
  margin-top: -1px;
  padding: 4px;
  text-decoration: none;
  font-size: 1em;
  color: black;
  display: block;
}

.active-li {
  background-color: #5897fb;
}

.active-li a {
  color: white !important;
  font-weight: bold;
}

* {
  box-sizing: border-box;
}

input.multi-checkboxes {
  display: none;
}

.selected a {
  background-color: #ff4242;
  font-weight: bold;
}

/* .selected.active>a:hover {
  background-color: #93fc83;
  color: red;
} */

/* .selected.active>a {
  background-color: #93fc83;
  color: red;
} */

.multi-dorpdown {
  padding-bottom: 0px;
  padding-top: 0px;
  border: 1px solid #aaaaaa;
}

JavaScript

multi_select_for_dropdown("filter_branch", "filter_branch_ul", "buttonId");

function multi_select_for_dropdown(searchbar_id, dropdown_id, buttonId) {
  var id_button = buttonId;
  var id_searchbar = searchbar_id;
  var id_dropdownul = dropdown_id;
  var storeTarget;
  var down = [];
  var scrolltop = 0;

  $('#' + id_button).on('click', function() {
    if ($(this).parent('.dropdown').find('.dropdown-menu').is(":hidden")) {
      setTimeout(function() {
        $('#' + id_searchbar).focus();
        $('#' + id_dropdownul).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-li");
          });
        });
        $('#' + id_dropdownul).find("li:first").focus().addClass("active-li");
        if ($('#' + id_dropdownul).find(".active-li").nextAll("li:visible").length > 1) {
          scrollTable();
        }
      }, 10);
    }
    count_selected_items();
    $('#' + id_searchbar).focus();
  });

  $("#" + id_searchbar).focusout(function(e) {
    $(this).val("");
  });
  $("#" + id_searchbar).on('keydown', function(e) {
      if (e.which === 38 || e.which === 40 || e.which === 16) {
        e.preventDefault();
      }
      down[e.keyCode] = true;
    })
    .keyup(function(e) {
      var $thisOne = $('#' + id_dropdownul + ' li.active-li').keyup();
      if (down[16] && (down[40] || down[38])) {
        e.preventDefault();
        $thisOne.find("input[type=checkbox]").attr("checked", !$thisOne.find("input[type=checkbox]").attr("checked"));
        if ($thisOne.find("input[type=checkbox]").attr("checked")) {
          $thisOne.addClass("selected");
        } else {
          $thisOne.removeClass("selected");
        }
      }
      if (down[16]) {
       ...