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 " id="filter_branch_ul" 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 {
  background-color: #5897fb;
}

.active 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");
var count = 0;

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 prev_val = "";
  var count_val;

  $('#buttonId').on('click', function() {
    count_val = 0;
    if ($('.dropdown').find('.dropdown-menu').is(":hidden")) {
      setTimeout(function() {
        $('#' + id_searchbar).focus();
        //$("#" + 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");
        if ($(".active").nextAll("li:visible").length > 1) {
          scrollTable();
        }
        //});
      }, 10);
    }
    count_selected_items();
    $('#' + id_searchbar).focus();
  });

  $("#" + id_searchbar).focusout(function(e) {
    $("#" + id_searchbar).val("");
  });

  $("#" + id_searchbar).on('keydown', function(e) {
    count_val = 1;
    if (e.which === 38 || e.which === 40) {
      e.preventDefault();
    }
  });
  var scroll = 0;
  var scrolltop = 0;
  $("#" + id_searchbar).keyup(function(e) {
    var input, filter, a, i, b, div, count = 0;
    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 = "";
      }...