JavaScript如何通过输入框过滤对象数组，仅展示匹配的列表条目

核心实现思路 #

• 改造原有渲染函数，增加搜索关键词入参：渲染前先清空两个目标容器的原有内容，遍历国家数组时只筛选名称匹配关键词的条目生成页面元素，同时修复原代码多次渲染导致元素堆叠的问题
• 给搜索输入框绑定input实时事件，每次输入内容变化时把最新关键词传给渲染函数，即时更新列表展示
• 匹配逻辑统一转小写做模糊比对，忽略输入字母的大小写差异，保证匹配准确性

完整可运行代码 #

调整后的JavaScript逻辑 #

let internationalCountries = [
    {
        name: "Spain",
        method: "Delivery",
        price: "£10.99",
    },
    {
        name: "Germany",
        method: "Delivery",
        price: "£8.99",
    },
    {
        name: "Japan",
        method: "Delivery",
        price: "£39.99",
    },
]

// 渲染函数增加searchKeyword参数，默认空值时展示全部国家
let renderCountryList = (searchKeyword = "") => {
    const ul = document.querySelector('.country-list')
    const deliveryInfo = document.querySelector('.delivery-info')
    
    // 渲染前清空容器原有内容，避免多次渲染出现元素堆叠
    ul.innerHTML = ""
    deliveryInfo.innerHTML = ""

    // 过滤出匹配关键词的国家条目
    const matchedCountries = internationalCountries.filter(country => {
        // 统一转小写做模糊匹配，消除大小写差异影响
        return country.name.toLowerCase().includes(searchKeyword.toLowerCase())
    })

    // 遍历匹配结果生成页面元素
    for (let i = 0; i < matchedCountries.length; i++){
        const currentCountry = matchedCountries[i]
        // 生成国家名列表项
        let listItem = document.createElement('li')
        listItem.textContent = currentCountry.name
        ul.appendChild(listItem)

        // 生成对应配送信息条目
        let para1 = document.createElement('p')
        let para2 = document.createElement('p')
        para1.textContent = currentCountry.method
        para2.textContent = currentCountry.price
        deliveryInfo.appendChild(para1)
        deliveryInfo.appendChild(para2)
    }
}

// 页面首次加载渲染全量列表
renderCountryList()

// 绑定搜索框实时输入事件
const searchInput = document.querySelector('#searchInput')
searchInput.addEventListener('input', (e) => {
    // 去除输入首尾空格后传给渲染函数触发更新
    renderCountryList(e.target.value.trim())
})

原有HTML结构无需修改 #

<input type="text" placeholder="Search..." id="searchInput">
<div>
  <ul class="country-list">
  
  </ul>
</div>
<div class="delivery-info">

</div>

运行效果 #

• 页面初始加载时展示全量国家配送列表
• 输入内容时实时过滤，仅展示国家名包含输入文本的条目
• 清空搜索框后自动恢复展示全部国家信息

实现细节说明：渲染时使用textContent填充文本，避免用户输入特殊字符引发安全问题；匹配时自动忽略首尾多余空格，减少用户误操作导致的匹配失效。

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