jquery文本框输入文字显示下拉框

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，可以通过监听文本框的输入事件，动态显示一个下拉框（通常是一个 <ul> 或 <div> 元素），这个下拉框可以根据用户的输入内容进行筛选和显示。

类型

静态下拉框：预先定义好下拉框的内容，用户输入时显示或隐藏。
动态下拉框：根据用户的输入内容，动态生成或筛选下拉框的内容。

应用场景

自动补全：在搜索框中输入关键词时，显示相关的建议列表。
选择框：提供一个输入框，用户输入时显示匹配的选项供用户选择。
过滤列表：在一个列表中输入关键词，动态显示匹配的项。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 实现一个动态下拉框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Dropdown Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #dropdown {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #dropdown li {
            padding: 5px;
            cursor: pointer;
        }
        #dropdown li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="inputField" placeholder="Type something...">
    <ul id="dropdown">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Orange</li>
        <li>Pear</li>
    </ul>

    <script>
        $(document).ready(function() {
            $('#inputField').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                $('#dropdown').toggle();

                $('#dropdown li').each(function() {
                    var text = $(this).text().toLowerCase();
                    if (text.indexOf(inputVal) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });

            $('#dropdown li').click(function() {
                $('#inputField').val($(this).text());
                $('#dropdown').hide();
            });
        });
    </script>
</body>
</html>