使用jquery+bootstrap封装下拉查询框

【代码】使用jquery+bootstrap封装下拉查询框。

Sarah无敌

548人浏览 · 2023-09-18 17:54:31

Sarah无敌 · 2023-09-18 17:54:31 发布

代码如下

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>下拉查询框</title>
  </head>
  <body>
    <!-- 下拉查询框 -->
    <div class="form-group">
      <div class="dropdown">
          <input type="text" id="selectInput" class="form-control" placeholder="请输入关键词进行查询" style="width: 300px;" >
          <div id="dropdownMenu" class="dropdown-menu" aria-labelledby="selectInput" style="width: 300px;"></div>
      </div>
  </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script >
    $(document).ready(function() {
        var dropdownMenu = $('#dropdownMenu');
        var selectInput = $('#selectInput');
        var options = [
              {id:"111",text:"模块1"},
              {id:"222",text:"测试数据"},
              {id:"333",text:"测试demo1"},
              {id:"444",text:"测试demo2"},
              {id:"555",text:"测试demo3"},
              {id:"666",text:"测试demo4"},
              {id:"777",text:"测试demo5"},
            ];

        // 监听输入框的点击事件
        selectInput.click(function() {
            showAllOptions();
        });

        // 监听输入框的值改变事件
        selectInput.on('input', function() {
            var keyword = $(this).val().toLowerCase();
            filterDropdownMenu(keyword);
        });

        // 监听下拉菜单选项的鼠标移入事件
        dropdownMenu.on('mouseenter', 'div', function() {
            $(this).addClass('hover');
        }).on('mouseleave', 'div', function() {
            $(this).removeClass('hover');
        });

        // 监听下拉菜单选项的点击事件
        dropdownMenu.on('mousedown', 'div', function() {
            var selectedData = $(this).text();
            selectInput.val(selectedData);
            console.log("选中数据-id---",$(this).attr('data-id'));

            hideDropdownMenu();
        });

        // 监听点击空白处的事件
        $(document).click(function(e) {
            if (!$(e.target).closest('.dropdown').length) {
                hideDropdownMenu();
            }
        });

        // 显示所有选项
        function showAllOptions() {
            dropdownMenu.empty();

            // 遍历所有选项
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                var div = $(`<div class="dropdown-item" data-id=${option.id}> ` + option.text + '</div>');
                dropdownMenu.append(div);
            }

            showDropdownMenu();
        }

        // 显示下拉菜单
        function showDropdownMenu() {
            dropdownMenu.show();
        }

        // 隐藏下拉菜单
        function hideDropdownMenu() {
            dropdownMenu.hide();
        }

        // 根据关键词过滤下拉菜单
        function filterDropdownMenu(keyword) {
            dropdownMenu.empty();

            // 遍历所有选项
            for (var i = 0; i < options.length; i++) {
                var option = options[i];

                // 判断选项是否包含关键词
                if (option.text.toLowerCase().indexOf(keyword) > -1) {
                    var div = $(`<div class="dropdown-item" data-id=${option.id}>` + option.text + '</div>');
                    dropdownMenu.append(div);
                }
            }

            // 如果没有匹配的选项，则隐藏下拉菜单
            if (dropdownMenu.children().length === 0) {
                hideDropdownMenu();
            } else {
                showDropdownMenu();
            }
        }
    });
</script>
  </body>
</html>