jquery 文本框下拉表格

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。文本框下拉表格通常是指通过 jQuery 实现的一种用户界面组件，用户可以在文本框中输入内容，然后通过下拉菜单展示相关的表格数据。

类型

静态下拉表格：预先定义好表格数据，用户输入时动态显示匹配的行。
动态下拉表格：通过 Ajax 请求从服务器获取数据，实时显示匹配的结果。

应用场景

搜索建议：用户在搜索框中输入内容时，显示相关的搜索建议。
自动补全：在表单中输入时，自动补全相关信息，如城市名、人名等。
数据筛选：用户可以通过输入内容来筛选表格中的数据。

示例代码

以下是一个简单的 jQuery 文本框下拉表格示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Textbox Dropdown Table</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content tr:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <input type="text" id="search-box" placeholder="Search...">
        <div class="dropdown-content" id="dropdown-table">
            <!-- Table will be populated here -->
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const data = [
                { id: 1, name: 'Alice' },
                { id: 2, name: 'Bob' },
                { id: 3, name: 'Charlie' },
                { id: 4, name: 'David' }
            ];

            $('#search-box').on('input', function() {
                const query = $(this).val().toLowerCase();
                let filteredData = data.filter(item => item.name.toLowerCase().includes(query));

                let tableHtml = '<table><thead><tr><th>ID</th><th>Name</th></tr></thead><tbody>';
                filteredData.forEach(item => {
                    tableHtml += `<tr><td>${item.id}</td><td>${item.name}</td></tr>`;
                });
                tableHtml += '</tbody></table>';

                $('#dropdown-table').html(tableHtml).show();
            });

            $(document).on('click', function(event) {
                if (!$(event.target).closest('.dropdown').length) {
                    $('#dropdown-table').hide();
                }
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

下拉表格不显示：
- 原因：可能是 jQuery 没有正确加载，或者下拉表格的 CSS 样式有问题。
- 解决方法：检查 jQuery 库是否正确引入，确保 CSS 样式正确设置 display: none 和 display: block。

输入时下拉表格不更新：
- 原因：可能是事件监听器没有正确绑定，或者数据处理逻辑有误。
- 解决方法：确保 input 事件正确绑定到文本框，并且数据处理逻辑正确。
下拉表格显示位置不正确：
- 原因：可能是相对定位或绝对定位设置有误。
- 解决方法：检查 .dropdown 和 .dropdown-content 的定位设置，确保下拉表格相对于文本框正确显示。