实现按州、城市、社区层级展示的搜索结果功能求助

问题说明 #

当前搜索功能仅显示匹配的社区名称，输入"town"时仅展示"Westmont Town Court"；需要改为州 ↳ 城市 ↳ 社区的层级展示格式，例如California ↳ Escondido ↳ Westmont Town Court。

调整方案 #

1. HTML结构修改 #

在原层级容器后新增搜索结果展示容器，默认保留原层级列表的显示逻辑：

<div class="dropdown">
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Find a Community Near You" id="myInput" onkeyup="filterFunction()">
        <!-- 原层级列表 -->
        <div id="down" class="down">
            <ul class="state">
                <!-- California -->
                <li data-state="California">
                    <a href="https://mywebsite.com/our-communities/california">California</a>
                    <ul class="city">
                        <!-- San Diego -->
                        <li data-city="San Diego">
                            <a href="https://myweb.com/our-communities/california/san-diego">San Diego</a>
                            <ul class="community">
                                <li><a href="https://myweb.com/our-communities/california/san-diego/westmont-of-carmel-valley/">Westmont of Carmel Valley</a></li>
                                <!-- 补充测试用的目标社区 -->
                                <li><a href="https://myweb.com/our-communities/california/escondido/westmont-town-court/">Westmont Town Court</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 新增搜索结果展示容器 -->
        <div id="searchResults" class="search-results"></div>
    </div>
</div>

2. JavaScript逻辑重写 #

替换原filterFunction，改为生成层级格式的搜索结果：

function filterFunction() {
    let input = document.getElementById("myInput");
    let filter = input.value.toUpperCase().trim();
    let downContainer = document.getElementById("down");
    let resultsContainer = document.getElementById("searchResults");
    
    // 清空历史结果
    resultsContainer.innerHTML = "";

    if (filter === "") {
        // 输入为空时，显示原层级列表，隐藏结果容器
        downContainer.style.display = "block";
        resultsContainer.style.display = "none";
        return;
    }

    // 输入有内容时，切换显示状态
    downContainer.style.display = "none";
    resultsContainer.style.display = "block";

    // 遍历所有社区节点匹配关键词
    let communities = downContainer.querySelectorAll(".community > li");
    communities.forEach(community => {
        let communityText = community.textContent.toUpperCase();
        if (communityText.includes(filter)) {
            // 获取层级数据
            let state = community.closest("[data-state]").dataset.state;
            let city = community.closest("[data-city]").dataset.city;
            let communityLink = community.querySelector("a").href;
            let communityName = community.querySelector("a").textContent;

            // 生成层级格式的结果条目
            let resultItem = document.createElement("div");
            resultItem.className = "result-item";
            resultItem.innerHTML = `<a href="${communityLink}">${state} ↳ ${city} ↳ ${communityName}</a>`;
            resultsContainer.appendChild(resultItem);
        }
    });

    // 无匹配结果时提示
    if (resultsContainer.children.length === 0) {
        resultsContainer.innerHTML = "<p class='no-results'>No matching communities found</p>";
    }
}

3. CSS样式补充 #

添加样式优化搜索结果的展示效果：

.search-results {
    margin-top: 10px;
    padding: 10px;
    border-top: 1px solid #eee;
}

.result-item {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.result-item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.result-item a:hover {
    color: #007bff;
}

.no-results {
    color: #666;
    text-align: center;
    padding: 15px;
}

效果说明 #

• 输入关键词（如"town"）时，显示所有匹配社区的完整层级路径，点击可直接跳转至对应页面
• 清空输入框后，自动恢复显示原有的州-城市-社区嵌套层级列表

内容的提问来源于stack exchange，提问作者Lotus