How to achieve drop-down having multiple input types ?

Last Updated : 18 Feb, 2022

We will learn how to achieve drop-down having the following requirements.

Checkbox list
Autocomplete search
Select all/Reset (if none selected, then select all)
Count number of selected option

These tasks are done by Bootstrap, HTML, CSS, and jQuery.

Approach: We will implement a bootstrap dropdown menu with a list of checkboxes and an auto-complete search box. When you check the select all checkboxes, then all three checkboxes are checked simultaneously. The value of the checkboxes and the number of checkboxes are shown on the above drop-down menu button. There is a search box that will be in the auto-complete mode and able to search all different programming languages.

Steps:

Write all the HTML and CSS code given below.
Attach an event listener to the dropdown button. When we will click the dropdown button then the code inside the body will be triggered.
In the body of the event listener, we are going to check all the check buttons if and only if the “select all” is checked to show the value of the checkbox in the above box. If the “select all” is not checked then all the checkboxes are unchecked and erase the value of checkboxes that will previously present in the box.
There is an autocomplete search box that is implemented to search all the programming language using jQuery.
Before implementing jQuery UI, please place all the CDNs in sequence otherwise it throws an error and your autocomplete search feature will not be working fine.
You can read all the documentation about jQuery UI.

Example:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet"
      href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"/>
    <script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous">
    </script>
    <link rel="stylesheet"
      href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script src=
"https://code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
    <style>
      span {
        background-color: white;
        padding: 8px 20px 5px 10px;
        min-height: 25px;
        line-height: 24px;
        overflow: hidden;
        border: 0;
        width: 272px;
        border: 1px solid green;
        padding: 0 3px 2px 0;
        display: flex;
        width: 50%;
        margin-left: 25%;
      }
      #ourinput {
        box-sizing: border-box;
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        border-bottom: 1px solid #ddd;
      }
 
      /* The search field when it gets focus/clicked on */
      #ourinput:focus {
        outline: 3px solid #ddd;
      }
      .dropdown-menu {
        transform: translate3d(5px, 35px, 0px) !important;
      }
    </style>
 
    <script>
      $(function () {
        var language = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme",
        ];
        $("#ourinput").autocomplete({
          source: language,
        });
      });
    </script>
  </head>
  <body class="container-fluid">
    <h1 style="color: green; text-align: center">
      GeeksforGeeks
    </h1>
    <hr style="border: 2px solid green" />
    <span class="justify-content-center d-flex" id="show-text">
      Select 
    </span>
    <div style="text-align: center" id="count">
      No. of checked item is : 0
    </div>
    <div style="padding-top: 50px"
         class="justify-content-center d-flex">
      <div class="dropdown">
        <button
          class="btn btn-success dropdown-toggle"
          type="button"
          id="dropdownMenuButton"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <div class="form-check">
            <div class="dropdown-header">select all checkbox</div>
            <div class="dropdown-item">
              <input
                class="form-check-input"
                type="checkbox"
                id="inlineCheckbox0"
                value="option2"/>
              <label class="form-check-label" for="inlineCheckbox0">
                Select all
              </label>
            </div>
            <div class="dropdown-divider"></div>
 
            <div class="dropdown-item">
              <input
                class="form-check-input"
                type="checkbox"
                id="inlineCheckbox1"
                value="option2"/>
              <label class="form-check-label" for="inlineCheckbox1">
                Geeks
              </label>
            </div>
 
            <div class="dropdown-item">
              <input
                class="form-check-input"
                type="checkbox"
                id="inlineCheckbox2"
                value="option2"/>
              <label class="form-check-label" for="inlineCheckbox2">
                For
              </label>
            </div>
            <div class="dropdown-item">
              <input
                class="form-check-input"
                type="checkbox"
                id="inlineCheckbox3"
                value="option2"/>
              <label class="form-check-label" for="inlineCheckbox3">
                Geeks
              </label>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-header">search language</div>
            <div class="dropdown-item">
              <div class="ui-widget">
                <input type="text" placeholder="Search.." id="ourinput"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <script>
      var i = 0;
      $(".dropdown").on("click", function () {
        if ($("#inlineCheckbox0").prop("checked")) {
          for (var i = 1; i <= 3; i++) {
            $("#inlineCheckbox" + i).prop("checked", true);
          }
          $("#show-text").text("Geeks For Geeks");
          $("#count").text("No of Checked item is :" + 3);
        } else {
          for (var i = 1; i <= 3; i++) {
            $("#inlineCheckbox" + i).prop("checked", false);
          }
          $("#show-text").text("select");
          $("#count").text("No of Checked item is :" + 0);
        }
      });
    </script>
  </body>
</html>