jquery实现非叠加式的搜索框提示效果

要使用jQuery实现一个非叠加式的搜索框提示效果，我们可以通过监听搜索框的输入事件（如`keyup`或`input`），然后根据输入内容动态显示或更新提示信息。非叠加式意味着每次输入时，提示信息都会更新而不是在之前的基础上叠加。

以下是一个简单的实现示例：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>非叠加式搜索框提示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    #search-box {
        width: 300px;
        padding: 10px;
    }
    #suggestions {
        list-style-type: none;
        padding: 0;
        margin: 0;
        border: 1px solid #ccc;
        display: none;
        position: absolute;
        background-color: white;
        z-index: 1;
    }
    #suggestions li {
        padding: 10px;
        cursor: pointer;
    }
    #suggestions li:hover {
        background-color: #f9f9f9;
    }
</style>
</head>
<body>

<input type="text" id="search-box" placeholder="搜索...">
<ul id="suggestions"></ul>

<script>
$(document).ready(function(){
    $('#search-box').on('input', function() {
        var searchTerm = $(this).val().toLowerCase();
        // 假设的提示数据
        var suggestions = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

        // 过滤提示数据
        var filteredSuggestions = suggestions.filter(function(item) {
            return item.toLowerCase().startsWith(searchTerm);
        });

        // 清空旧的提示
        $('#suggestions').empty();

        // 显示新的提示
        if (filteredSuggestions.length > 0) {
            $('#suggestions').show();
            filteredSuggestions.forEach(function(item) {
                $('#suggestions').append('<li>' + item + '</li>');
            });
        } else {
            $('#suggestions').hide();
        }
    });

    // 点击提示项时，将内容填充到搜索框
    $('#suggestions').on('click', 'li', function() {
        $('#search-box').val($(this).text());
        $('#suggestions').hide();
    });
});
</script>

</body>
</html>

这个示例中，我们创建了一个搜索框和一个用于显示提示的`

请注意，这里的提示数据是硬编码的，实际应用中你可能需要从服务器获取这些数据。