切换搜索栏中的div显示

<input type="text" id="search-bar" placeholder="请输入搜索内容">
<div id="result1" class="search-result">搜索结果1</div>
<div id="result2" class="search-result">搜索结果2</div>
<div id="result3" class="search-result">搜索结果3</div>

var searchBar = document.getElementById("search-bar");
searchBar.addEventListener("keyup", function() {
    var searchValue = searchBar.value.toLowerCase(); // 获取搜索栏输入的内容并转换为小写
    var results = document.getElementsByClassName("search-result"); // 获取所有搜索结果的div元素

    // 遍历所有搜索结果的div元素
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var resultText = result.innerText.toLowerCase(); // 获取搜索结果的文本内容并转换为小写

        // 判断搜索结果是否包含搜索栏输入的内容
        if (resultText.includes(searchValue)) {
            result.style.display = "block"; // 显示匹配的搜索结果
        } else {
            result.style.display = "none"; // 隐藏不匹配的搜索结果
        }
    }
});

.search-result {
    display: none; /* 默认隐藏搜索结果 */
}

.search-result.show {
    display: block; /* 显示匹配的搜索结果 */
}