如何实现带筛选提示的国家搜索栏？

你需要为国家历史网站实现搜索提示功能：用户输入字符时，显示最多5个名称包含该字符的国家，同时解决隐藏列表仍占用页面空间的问题。以下是完整的实现方案：

HTML 结构调整 #

给搜索区域添加容器，确保下拉列表能正确定位，避免影响原有布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>National Histories</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="topnav">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <!-- 新增搜索容器用于定位下拉列表 -->
        <div class="search-container">
            <input type="text" id="mySearch" placeholder="Search.." title="Type in a country name">
            <ul id="myMenu">
                <li><a href="afghanistan.html">Afghanistan</a></li>
                <li><a href="albania.html">Albania</a></li>
                <li><a href="algeria.html">Algeria</a></li>
                <li><a href="andorra.html">Andorra</a></li>
                <li><a href="angola.html">Angola</a></li>
                <li><a href="antigua-and-barbuda.html">Antigua and Barbuda</a></li>
                <li><a href="argentina.html">Argentina</a></li>
                <li><a href="armenia.html">Armenia</a></li>
                <li><a href="australia.html">Australia</a></li>
                <li><a href="russia.html">Russia</a></li>
                <!-- 其他国家列表... -->
            </ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 样式优化 #

解决隐藏列表占用空间的核心问题，同时美化搜索区域和下拉列表：

body {
    margin: 0px;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.topnav {
    background-color: #000;
    overflow: hidden;
    position: relative;
}
  
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* 搜索容器样式 */
.search-container {
    float: right;
    position: relative;
    margin: 7px 16px;
}

#mySearch {
    padding: 6px;
    margin-top: 0;
    font-size: 17px;
    border: none;
    width: 200px;
}

/* 下拉列表核心样式 */
#myMenu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #f9f9f9;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 200px;
    max-height: 200px;
    overflow-y: auto;
    display: none; /* 默认完全隐藏，不占用文档流空间 */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#myMenu li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    float: none;
    text-align: left;
}

#myMenu li a:hover {
    background-color: #ddd;
}

/* 控制下拉列表显示的类 */
#myMenu.show {
    display: block;
}

JavaScript 搜索过滤逻辑 #

实现输入匹配、最多显示5个结果的核心功能，同时添加交互优化：

const searchInput = document.getElementById('mySearch');
const countryList = document.getElementById('myMenu');
const countryItems = countryList.querySelectorAll('li');

// 监听搜索框输入事件
searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase().trim();
    let matchedCount = 0;

    // 先隐藏所有列表项
    countryItems.forEach(item => {
        item.style.display = 'none';
    });

    if (searchTerm.length > 0) {
        // 过滤匹配项，最多显示5个
        countryItems.forEach(item => {
            const countryName = item.textContent.toLowerCase();
            if (countryName.includes(searchTerm) && matchedCount < 5) {
                item.style.display = 'block';
                matchedCount++;
            }
        });
        // 显示下拉列表
        countryList.classList.add('show');
    } else {
        // 清空输入时隐藏列表
        countryList.classList.remove('show');
    }
});

// 点击页面其他区域隐藏下拉列表
document.addEventListener('click', function(e) {
    if (!e.target.closest('.search-container')) {
        countryList.classList.remove('show');
    }
});

关键说明 #

• 使用display: none替代其他隐藏方式，彻底解决隐藏列表占用空间的问题。
• 下拉列表采用绝对定位，脱离文档流，不会影响导航栏的原有布局。
• 搜索匹配不区分大小写，支持模糊匹配包含搜索字符的国家名称，最多显示5个结果。
• 添加点击页面其他区域隐藏下拉列表的交互，提升用户体验。

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