如何实现具有多种输入类型的下拉菜单？

我们将学习如何实现具有以下要求的下拉。

• 复选框列表
• 自动完成搜索
• 全选/重置（如果没有选择，则全选）
• 计算所选选项的数量

这些任务由 Bootstrap、HTML、CSS 和 jQuery 完成。

方法：我们将实现一个带有复选框列表和自动完成搜索框的引导下拉菜单。当您选中全选复选框时，会同时选中所有三个复选框。复选框的值和复选框的数量显示在上面的下拉菜单按钮上。有一个搜索框将处于自动完成模式，并且能够搜索所有不同的编程语言。

脚步：

• 编写下面给出的所有 HTML 和 CSS 代码。
• 将事件侦听器附加到下拉按钮。当我们单击下拉按钮时，将触发正文中的代码。
• 在事件侦听器的主体中，我们将在选中“选择全部”以查看上述框中的“全选”以显示复选框的值时检查所有复选按钮。如果未选中“全选”，则所有复选框都未选中，并删除先前出现在框中的复选框的值。
• 有一个自动完成搜索框，用于使用 jQuery 搜索所有编程语言。
• 在实现 jQuery UI 之前，请按顺序放置所有 CDN，否则会引发错误，并且您的自动完成搜索功能将无法正常工作。
• 您可以阅读有关 jQuery UI 的所有文档。

例子：

HTML

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      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;
      }
    
 
    
      $(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,
        });
      });
    
  
  
    
      GeeksforGeeks
    
    
    
      Select
    
    
      No. of checked item is : 0
    
    
      
        
          Dropdown button
        
        
          
            select all checkbox
            
              
              
                Select all
              
            
            
 
            
              
              
                Geeks
              
            
 
            
              
              
                For
              
            
            
              
              
                Geeks
              
            
            
            search language
            
              
                
              
            
          
        
      
    
 
    
      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);
        }
      });
    
  

输出：