How to achieve drop-down having multiple input types ?

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>

Output:

How to achieve drop-down having multiple input types ?

D

debadebaduttapanda7

Improve

Article Tags :

Similar Reads

How to Add Drop Down List in Table Cell ?

Drop-downs are the user interface elements. Drop Down List is used to select one out of various options. This article focuses on creating a drop down list in the table cell which helps in selecting the choices directly from the table itself. Below are the approaches to add a Drop Down List in a Tabl

How to create multiple dropdown options as a tag in ReactJS?

Choosing multiple options and creating your own options from the dropdown means allowing the user to choose more than one option from the dropdown and add his own options. Material UI for React has this component available for us and it is very easy to integrate. We can choose multiple options and c

How to Create a Drop-Down List in Excel: 2 Easy Methods

How to Build Drop Down Menu in Excel: Quick StepsOpen MS Excel Spreadsheet >> Enter List Items Select Cell >> Go to Data Validation Choose List Option Set the Source >>Click OKHave you ever typed the same data repeatedly in Excel, only to make typos or inconsistencies? A drop-down

How to define a drop-down list in HTML5 ?

In this article, we define a Drop-Down List By using the <select> Element in the Document. This tag is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list.Note: The tag is used in a form to receive user response.

How to Create a Dependent Drop Down List in Excel

Dependent Down Lists allow you to validate the data and make the data entry and data filtering very smooth and time-saving. Dependent Down Lists increase the chances of fewer errors in one's worksheet. The prerequisites for learning Dependent Drop Down List are Create from Selection and Drop Down Li