jquery智能提示框

jQuery智能提示框是一种基于jQuery库的用户界面组件，用于在用户输入时提供实时的建议或选项列表。这种提示框通常用于表单输入字段，以提高用户体验和数据输入的准确性。

基础概念

智能提示框通过监听输入字段的事件（如keyup、focus等），在用户输入时动态地显示一个下拉列表，其中包含与用户输入匹配的建议项。用户可以通过键盘或鼠标选择列表中的项，从而快速完成输入。

类型

基于数据的智能提示框：从服务器获取数据并显示匹配项。
基于本地数据的智能提示框：使用预定义的数组或对象作为数据源。
自定义智能提示框：允许开发者自定义提示框的样式和行为。

应用场景

搜索框：在搜索引擎中提供自动完成功能。
表单输入：如电子邮件地址、用户名等字段的自动填充。
城市选择器：在注册或配送信息表单中提供城市名称的建议。

示例代码

以下是一个简单的基于本地数据的jQuery智能提示框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 智能提示框示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .suggestions {
            border: 1px solid #ccc;
            max-height: 150px;
            overflow-y: auto;
            display: none;
        }
        .suggestions div {
            padding: 5px;
            cursor: pointer;
        }
        .suggestions div:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" id="autocomplete" placeholder="输入城市名称...">
    <div class="suggestions" id="suggestions"></div>

    <script>
        $(document).ready(function() {
            var cities = ["北京", "上海", "广州", "深圳", "杭州", "成都", "重庆"];
            $('#autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                $('#suggestions').empty();
                if (inputVal.length > 0) {
                    var matches = cities.filter(function(city) {
                        return city.toLowerCase().indexOf(inputVal) > -1;
                    });
                    if (matches.length > 0) {
                        matches.forEach(function(match) {
                            $('#suggestions').append('<div>' + match + '</div>');
                        });
                        $('#suggestions').show();
                    } else {
                        $('#suggestions').hide();
                    }
                } else {
                    $('#suggestions').hide();
                }
            });

            $(document).on('click', '#suggestions div', function() {
                $('#autocomplete').val($(this).text());
                $('#suggestions').hide();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#autocomplete').length && !$(event.target).closest('#suggestions').length) {
                    $('#suggestions').hide();
                }
            });
        });
    </script>
</body>
</html>